Front-end developer, user experience designer & Jedi.

Understanding CSS positioning part 2

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 realother 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:

inline-block

list-item

run-in

compact

table

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:

table-row (<tr>)

table-cell (<td> or <th>)

table-column (<col>)

table-row-group (<tbody>)

table-header-group (<thead>)

table-footer-group (<tfoot>)

table-column-group (<colgroup>)

table-caption (<caption>)

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!

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:

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.

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.

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.

[…] 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. […]

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.

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.

Related Articles

Without a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a lot of ways to position an element, all with various (dis) advantages. This series of articles…

Vertical floating is an idea I’ve had for some time now, but only recently really had a need for. Float:left; and float:right; are often used to float images or clear certain parts of the background, making the text flow nicely around it. And it’s used…

In part one and part two we’ve discussed the positioning, display and floats properties of CSS2. In the final part of this series, we’ll discuss the new options CSS3 gives us: The advanced layout module and the grid positioning module.
CSS3 is built up out of…