16

I'm trying to set the width of a <main> element with CSS. Just using

main {
  width:200px;
}

works fine in all browsers except Internet Explorer (Edge does work).

Take a look at this example: JSfiddle

The result in IE11:

enter image description here

The result in Chrome:

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jens Renders
  • 496
  • 1
  • 4
  • 17

1 Answers1

46

The HTML5 main element is not supported by Internet Explorer (see browser support data).

You'll need to define main as a block-level element for width to work.

Make this adjustment:

main {
  display: block;  /* new */
  width: 200px;
}

Because the main element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values (per the spec).

The initial value of the display property is inline.

The width property is ignored by inline elements. From the spec:

10.3.1 Inline, non-replaced elements

The width property does not apply.

By defining the main element as a block-level element in author styles, the width property will work.

More details:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 2
    Thanks, this works! Weird that IE11 doesn't support this simple HTML5 tag. – Jens Renders Mar 05 '16 at 22:04
  • @JensRenders It takes IE years to support new elements, CSS properties and APIs that all other browsers support so, no, this is no surprise and won't be much different in Edge. – Rob Mar 05 '16 at 22:11
  • 1
    The main tag is display: block by default in Edge :) – Julian H Apr 23 '19 at 15:59