RK* - rikkertkoppes.com

thoughts

[CSS] inline boxes with defined width

Many people think inline elements, like <span> can be given a defined width and height. In fact in IE in quirks mode you can, but this is not correct, according to w3c specification.

This problem usually occurs within menu's like mine above this page. In general people try something like this:

<div>
  <div>item1</div>
  <div>item2</div>
  <div>item3</div>
  <div>item4</div>
</div>

And then some classes are added and the inner div's are set to display: inline;. This works fine untill you want to add a common width to them, since inline boxes should not accept widths

First of all: a more apropriate element for menu's like this is the <ul> or <ol> element, this makes everything a lot more readable without styles as well (also see my writings about the use of elements and Smurf language).

Furthermore, the best method to implement this is display: inline-block; for the inner elements (now <li>), but unfortunately this is not supported by most browsers

So another way to make boxes align next to eachother is float: left;. This way all boxes align to the left and width is also applied. One characteristic of floats however is that they are taken "out of the flow", which means their surronding box (the ul), is not aware of their dimensions anymore, thus displayed without height (as is there was no content at all). This can be solved by adding an explicit height to it, or by adding an empty <li> to it, with clear: both; applied to it. This forces the last li to always be below the floating boxes, and, since this one is in the normal flow, stretches the surronding box accordingly. In my menu I chose the first solution.

Another (nicer) way to assure boxes scale up to surround their floating contents is adding some sort of overflow property to the box, as explained by Anne van Kesteren. Also note a little bug in Internet Explorer which could be fixed by forcing hasLayout (by adding a height as Anne explains).

Be sure to read chapters 9 and 10 of the CSS 2.1 specification on the visual formatting model. This will enlighten you on how CSS should be interpreted. Starting with this, you can work your way around (mostly IE) browser quirks.

So what is it that I used? The HTML code comes down to this (I added a "skip to content" item for non-visual useragents and omitted classes and anchors for clearity):

<ul>
  <li class="non_visual">skip to content</li>
  <li>news</li>
  <li>artwork</li>
  <li>thoughts</li>
  <li>artist</li>
  <li>links</li>
</ul>

And the CSS:

ul#mainmenu {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 1.2em;
  border-bottom: 1px dashed gray;
}
ul#mainmenu li {
  min-width: 100px;
  float: left;
  border-right: 1px solid gray;
  text-align: center;
  margin: 0;
  padding: 0 1em 0 1em;
}

In case you wonder what the min-width and padding properties are for: if you scale text to a larger font, the text may become larger than the box, hence the min-width, IE does not recognize this property, but that's fixed with an IE only style sheet. The padding is added for clearity when using larger fonts.

Update 2005-02-06

After reading this discussion, initiated by Peter-Paul Koch, I reckon inline boxes with defined width could best be achieved by the following:

ul#mainmenu li {
  min-width: 100px;
  display: -moz-inline-box;
  display: inline-block;
  border-right: 1px solid gray;
  text-align: center;
  margin: 0;
  padding: 0 1em 0 1em;
}

This will work in most browsers. Why gecko doesn't support display: inline-block; yet I don't know, but this will work. In IE however this only works on native inline elements (as Peter-Paul explains), so the float approach is used there (in my IE only CSS to keep my main CSS clean).

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).

  1. CSS inline width - Google Search (423)
older articles

AdministrationAtom feed