Kilian Valkhof

Front-end & user experience developer, Jedi.

Understanding CSS positioning part 2

CSS & HTML, 12 May 2008

This is the second part in the Understanding CSS positioning series, which will focus on float and more advanced display properties. Float is one of the most often used CSS property in current day stylesheets, and this article will show that there are quite some more display properties than just block and inline. We’ve already covered those properties in part 1, so if you haven’t read it yet, start there first!

Floating to the side

In essence, floating allows you to place a block element to the left or right border of its containing element and let the rest of the content flow around it. A floated element automatically becomes a block element so you can add a width and height to it. Between the two, always make sure that you specify a width, because without it the rendering can be unpredictable.

The CSS for floating is: float:left;, float:right; or float:none;. Floating looks like this:

This is a very useful feature when making layout, because like position:absolute; you can place block elements besides each other, but unlike it, they can interact with each other as well. You can float two elements next to each other, and when the left element gets wider, the right element will move accordingly. Like so:

For a silly reason, Internet Explorer 6 adds extra bits of margin around floated elements. To solve this, there is an equally silly fix: just add display:inline; to the floated element and the extra margins magically disappear.. Since floated elements will always be block, this doesn’t affect any real other browsers.

Clear

There are times when you don’t want certain content to be next to floated elements. To accomplish this, you can use clear. You can decide to clear all left, right or both, floated elements, or explicitly tell an element to clear nothing with clear:none;.

You can use these two properties together: a floated element can also clear other floated elements before it. This is useful when you have a list of two elements that you want to display next to each other, but every pair on it’s own line. (for example, definition lists or label + input combinations)

Just float all elements, and add clear:left to each first element:


.div1 {
	float:left;
	clear:left;
}
.div2 {
	float:left;
}

Will result in this image:

There are a number of rendering bugs in internet explorer 6 (the most common one is called the peekaboo bug), most of which can be fixed by making sure your elements have hasLayout, so just add a width, positioning or zoom:1 to your css.

Overflowing

When you float an element, its parent will not scale to encompass it unless the parent element is floated itself or the inline content makes the parent element long enough. If you float an element that is longer than it’s parents element, this will happen:

You could just tell it to encompass it. To do so, just add overflow:auto; to the parent element. Fixed:

Display:even-more!

In the first part of this series we discussed the block, inline display modes. But CSS2 has a bit more:

However as you might expect, none of them work cross-browser, and a couple don’t work at all. For an excellent overview, check out PPK’s compatibility table to see that we can pretty much forget about run-in and compact

Display:inline-block;

That seems a bit contradictory, doesn’t it? It’s not though. An element with inline-block get placed inside flow, on the line next to other elements, but you can style it like a block element. So it can have a width and height and add margin and padding to it. This doesn’t work in firefox2 (it does in 3) and is a bit buggy in internet explorer 6 and 7: there it only works on elements that naturally have display:inline; Update: or, like NatalieMac said in the replies, by firstly declaring it to be display:inline; and then display:inline-block in another selector. IE truly moves in mysterious ways…

Display:list-item;

List-item works in IE6 and better, so you can feel free to use it. When you make something a list-item, you basically make two boxes: one that has a block setting for the text within it, and a “marker box”, where the dot goes:

Display:run-in;

Run-in does not work in anything but Opera. Its description is awfully confusing, but I’ll try to translate it into more understandable English: an element with display:run-in; will be placed right in front of the next (block) element. However, If there is no block element following it, it will become a block element itself. The use for this element is being able to make run-in headers:

Behind the scenes, the heading in the above image actually gets placed inside the paragraph and gets display:inline;.

Display:compact;

This value is dependent on the next element as well. Adding to the complexity however, the following will only happen if the element is less than one (text) line long: if the next element is a block element and has enough margin-left, the element with display:compact; becomes display:inline; and is positioned in the left-margin of the next element.

Adding to that, the line-height of the element with display:compact; will also be used for the first line of the block element next to it.

In the above (simulated) example, you can see that the line-height of the element with display:compact; (3em) is used as the line-height for the first line of the next element as well.

Display:table

display:table comes with a couple of other display properties:

The HTML equivalent is placed in parentheses. These elements do not work in Internet explorer 6 or 7, but do in all other browsers. Together, they allow you to emulate a table while using other elements.

There is also an inline-table value, which allows you to place the whole of the above in line with the rest of your content.

That’s it for CSS2!

We’ve now covered all the positioning possibilities CSS2 gives. Tune in next week to see what CSS3 has to offer us!

Update: part three of Understanding CSS positioning is posted, check it out!

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. […] Understanding CSS positioning part 2 Salva e condividi questo articolo: Queste icone linkano i siti di social bookmarking sui quali i lettori possono condividere e trovare nuove pagine web. […]

  2. […] part two of Understanding CSS positioning is posted, check it […]

  3. Kilian, great going looks like you’re on a roll. These last two articles I will dish out to others…

  4. Hello! Great set of articles — these will be really helpful and informative to people struggling with CSS.

    Just wanted to add a little note about display:inline-block for IE. You can use it on elements that are naturally block elements if you declare their display as inline in a separate selector. For example:

    div { display: inline; }
    div { display: inline-block; }

    will make this correctly display as inline-block in IE.

    Using the same selector will not work. For example,

    div { display: inline; display: inline-block; }

    does not trigger the inline-block display for IE.

  5. Wow NatalieMac, that’s absolutely insane! Thanks for sharing, I’m adding it to the article now!

  6. Hector

    great article, keep up the good work!
    It’s really helpfull.

  7. The other thing to note is that “inline-block” does not work in Firefox 2.0, but does in 3.0. Firefox has an equivalent property called “-moz-inline-stack” (along with a few other similar ones, but this one works best I find.). If you use that one though, you have to put your content in a nested DIV like so:

    <span style=”display: -moz-inline-stack; display: inline-block;” >

    <div>Content
    </div>
    </span>

    FF2 will read the “-moz-inline-stack” but ignore “inline-block” and IE vice-versa. The alignment of the inlined block will be different in IE vs. FF2 as well, so watch out for that.

  8. […] блог Килиана Вальхофа. Категория: CSSАвтор: Spider Дата: 13 Май 2008 Время: 23:50 […]

  9. Andrew Z

    The overflowing technique to have the outer block ‘wrap’ doesn’t work in the IE browsers.
    You need to add the following after the inner block:

  10. Andrew Z

    My HTML didn’t show either:

  11. Andrew Z

    Ooops. Let’s try this another way. You need to add the following style to a block element below the inner div.

    clear: both; padding: 0px; margin: 0px;

  12. pbb

    I would like to see the actual CSS/HTML used to create each example. This would be particularly useful for the beginner given that the examples are actually images, so one can’t even look at your own code to see how an example is done. If you feel this would clutter your page, then add it as a pop-up or via another page.

  13. Sorry guys, I’ve added a message to the comment box reminding people to escape code examples!

    pbb, a lot of these examples are simulated, because they do not work in browsers yet. The bit of CSS is always in the headers (display:inline-block etc.) If you have any particular questions about the html and css for any of the examples, feel free to e-mail me at my first name @ this domain.

    Cheers!

  14. […] Understanding CSS positioning part 2 | KilianValkhof.com […]

  15. […] Understanding CSS positioning part 2 | KilianValkhof.com Advanced CSS Positioning (tags: css webdesign positioning) […]

  16. […] Understanding CSS positioning part 2 | KilianValkhof.com (tags: css layout float) […]

  17. […] it only works on elements that naturally have display:inline; Update: or, like NatalieMac said in the replies, by firstly declaring it to be display:inline; and then display:inline-block in another selector. […]

  18. Mathew

    The example given under “Just float all elements, and add clear:left to each first element:” does not work as shown in the image in IE6.

  19. […] part one and part two we’ve discussed the positioning, display and floats properties of CSS2. In the final part of […]

  20. […] Une série d’articles très bien fait sur le positionnement en CSS […]

  21. Mathew, They work when your containing element hasLayout :)

  22. […] 1 | Part 2 | Part […]

  23. That was great. #1 in this series was a good refresher but this one really explained alot of stuff I use in plain english and now I “get” it. Thanks so much!!

  24. […] 1 | Part 2 | Part […]

  25. […] 1 | Part 2 | Part […]

  26. […] new CSS3 layout modules. The first part will introduce the positioning and display property. Part1, Part2, Part3 gives you a deep understanding of the possibilities you have in […]

  27. Jonas

    That bit about overflow:auto really saved my day. Great article!

  28. […] в статье Understanding CSS Positioning part 1 , и в продолжение ее Part2, Part3. Вы найдете не только ответы на разнообразные […]

  29. Great tips! Thank you.

  30. Actually, it’s recommended to use overflow: hidden instead of overflow: auto as some browsers (like IE, surprise) sometimes messes it up and shows some scrollbars in the affected div. In IE6 you may also have to use either width: 100% or height: 1% to trigger the hasLayout property, which will make IE6 to render the box correctly.

  31. […] 布局模型的一个预览。第一部分将会介绍定位和display属性。 Part1, Part2, Part3 […]

  32. […] Understanding CSS positioning part 2 • CSS & (X)HTML • Kilian Valkhof – Interesting article by Kilian Valkhof on positioning in CSS […]

  33. […] new CSS3 layout modules. The first part will introduce the positioning and display property. Part1, Part2, Part3 gives you a deep understanding of the possibilities you have in […]

  34. Интересный пост, спасибо вам. Меня интересует только вопрос – будет ли продолжение? :)

  35. […] Understanding CSS Positioning, Part 2 – Kilian Valkhof […]

  36. […] 布局模型的一个预览。第一部分将会介绍定位和display属性。 Part1, Part2, Part3 […]

  37. […] 布局模型的一个预览。第一部分将会介绍定位和display属性。 Part1, Part2, Part3 […]

  38. […] в статье Understanding CSS Positioning part 1 , и в продолжение ее Part2, Part3. Вы найдете не только ответы на разнообразные […]

  39. I’m trying to make a website and found your CSS articles to be helpful! However, I’m still confused on how to go about what I’m trying to do. I’m trying to make the banner for the site. I want to use an image for the right side of the banner, and I’m using the CSS width property at 30% to dynamically resize the image as the page size changes. This is working so far. I’m then floating the image right.

    Then I would like to use font’s instead of images to fill the rest of the available width. I’ve created 3 floating divs and given them each a width of 70%. However, I’m not sure how I can make the fonts stretch across the divs without giving them a static size, which would defeat the whole purpose. I’ve tried a number of different ways of going about this, and digged through a whole bunch of CSS resources, and still haven’t found a solution. Furthermore I don’t give a damn about ie6 (however, more recent ie versions I would like to make work.)

    Here is the banner which
    I’m working on, the photo below is a static image showing what I’m trying to achieve.

    feel free to email me any suggestions

    Best,

    Colin Williams

  40. […] 布局模型的一个预览。第一部分将会介绍定位和display属性。 Part1, Part2, Part3 […]

  41. […] new CSS3 layout modules. The first part will introduce the positioning and display property. Part1, Part2, Part3 gives you a deep understanding of the possibilities you have in […]

  42. […] Part 2 | […]

  43. Thank you for the tutorial. IT was very helpful in some layout issues iv been having.

  44. I’ve always considered floating a tricky element of CSS design and your posts contain easy to understand and implement instructions. Even graphic design newbies will appreciate this!