Dec 12
Display:table
2005 at 06.53 am posted by Veerle
A very common problem with CSS layouts is that if you float an image left or right, the content that follows this image will float next to the image. That’s obvious since that’s exactly what it should do. Sometimes we want this effect only to a certain point.
For example we want the title and new block of text that follows to start right under the image, so not the behavior that you see in this example. If we clear the float the problem will be solved. To do this we need to add an extra element in the code and give it a "clear:both". I've used a horizontal rule but this solution isn't preferable since it creates an extra space in I.E. Another way is to wrap the content in a div container and add "display:table":
.clearfloat {display: table;width: 100%;}
A class is of course not really necessary in this example but in real world situations the page will probably have more then one div, so a class will be needed.
The display property specifies the type of rendering box of an element and is very powerful. It lets you overwrite the default rendering behavior. In our example the element will be displayed as a "table" with a linbreak before and after, which is exactly what we want. FYI: the excellent PPK has a whole page on the display property.
26served
1
Very nice. I’ve tested this in IE(6 and 5.5), Firefox (1.5) and Opera(8.5).
Any idea how well this works in other browsers? (IE on Mac is always a bit of a bugger)
2
@Richard, I’m afraid it doesn’t work in I.E. 5 on Mac. The option with the horizontal rule works, but unfortunately not the option with “display:table”.
3
Does anyone worry about making IE on the Mac work perfectly these days? In my opinion it’s like the days when we were phasing out 100% support for Navigator 4, just make sure the content is readable and accessible and that’s all. Why bother spending the extra time and hacks to make IE Mac look perfect? Its use is so very low right now and it is a dead browser. These days we just concentrate on Safari/Firefox/IE5+/Opera, etc.
4
I think I might have missed the memo. Is IE Mac coming out of retirement?
5
You can also set the wrapper div style to { overflow: auto }
I prefer using this method, although it can be hit or miss in IE. If your content is more than 100% of the width of the containing element IE will add a horizontal scrollbar.
6
I can confirm this works in konqueror too, though that should not be a surprise, since it renders pages similar to safari.
A small oddity, however, is that the last page, using :table has a few pixels more whitespace above the top title.
7
No doubt this may be useful in some situations, but why not just use
clear:bothon your div container?
8
Good trick that!
9
Well, if you want full comptability and no pesky extaneous elements, try this.
10
I noticed only slight differences between display: table and clear: both on the div- container comparing IE 6.0 and FF 1.5. FF uses a different amount of whitespace for each variant (the clear variant uses only half the whitespace). Both variants display the same in IE. The display: table variant displays excactly the same in IE and FF, so I guess thats the way to go. Cheers, Veerle. What about other browsers?
11
About I.E. 5 Mac I have the same opinion as Cody, I would just make sure it’s accessible and readable, that’s all.
@Matthew Buchanan, yes in this situation you are right. This example was actually taken out of a more complex layout (liquid 3 columns layout) and using clear:both affected other elements surrounding this content. But if you see it simple that this would be indeed the best option. Good point ;-)
@Glen, my 2nd example os based on this. It sure works perfectly but it’s more like a fix to me, since you have this extra ‘empty’ div there.
About the differences of space maybe a margin:0 would help solve this I don’t know.
12
(Mistake: “float:clear")
13
Oops thx Jens ;-)
14
maybe the code example was too simple because to make your first example look like your last example, I just added clear:both to your h2. No wrapper or empty elements required.
15
To everyone who says to use clear:both, if you’ve done much CSS programing on more complex layouts you’d realize that you’ll run into trouble using that. You may very well have other floats occurring around the elements you want to clear and using clear:both would clear things you don’t want cleared. Other solutions are needed and that is what this article is about.
16
@Jonathan Snook, yes Cody is right. I took this example from a rather complex layout (3 column liquid layout) and using float:clear wasn’t an option. Maybe I should have made this clear in the article. I want to show that ‘display:table’ is a nice option. I remember I had trouble to get it right in this particular site and this did the trick. Unfortunately I can’t show the real example since it is confidential (intranet site).
17
Sorry if I didn’t come off as appreciative of the tip. Kudos for sure!
18
@Jonathan, no worries I didn’t think that at all, your point did make sense. It’s something I didn’t think through properly before posting. I’m often too hasty ;-) I have to admit that I use “clear:both” more often then this option. I always try to avoid to add structural markup if possible. With CSS you often have several options to achieve the same result, and that’s pretty cool.
19
When IE 7 ships maybe we’ll use see more pseudo elements like :
img:after {clear : both;
}
Sorry for old browsers.
20
You have great tips and tutorials. I know you’ve recorded some of them before (you had one in Illustrator not too long ago) which is great! I stumbled onto this site, not sure what you use to record or if this is what you use or if this would be a better app for you :)
http://www.polarian.com/
21
@shannon, I use SnapzPro a very cool tool that I mostly use to take screenshots (more control then the built-in function on Mac). I can’t miss this app for one minute ;-) I can also record sound etc. It uses QuickTime for movies and PDF for pictures. Thanks for the tips though, seems like a handy tool too if you want it to be swf without a hassle.
22
John has solved the same problem:
http://www.positioniseverything.net/easyclearing.html
this includes a IE5Mac solution
23
Thanks a bunch!
This tip will be a great time saver for the product gallery that I’m designing.
Happy new year!
24
For another way to do this - that is all browser friendly (even IE Mac) - is instead of using
.clearfloat {display: table;
width: 100%;
}
use
.clearfloat {overflow: auto
}
For some reason the manual setting of oveflow to auto forces the containing DIV to expand.
Happy New Year
25
Or you could just do something like
.clearing {height:0;
clear:both;
}
Works fine in everything although IE win adds some space to it.
26
Try like this:
.clearing {
height:0;
clear:both;
font-size:0;
}