You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Dec 12

Display:table

2005 at 06.53 am posted by Veerle Pieters

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

  1. .clearfloat {
  2. display: table;
  3. width: 100%;
  4. }

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

gravatar

1

permalink this comment Richard@Home Mon Dec 12, 2005 at 08.28 am

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)


gravatar

2

permalink this comment Veerle Mon Dec 12, 2005 at 09.15 am

@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”.


gravatar

3

permalink this comment Cody Mon Dec 12, 2005 at 09.59 am

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.


gravatar

4

permalink this comment Nathan Smith Mon Dec 12, 2005 at 10.06 am

I think I might have missed the memo. Is IE Mac coming out of retirement?


gravatar

5

permalink this comment Bryan Peters Mon Dec 12, 2005 at 10.35 am

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.


gravatar

6

permalink this comment Bér Mon Dec 12, 2005 at 11.41 am

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.


gravatar

7

permalink this comment Matthew Buchanan Mon Dec 12, 2005 at 12.37 pm

No doubt this may be useful in some situations, but why not just use

clear:both

on your div container?


gravatar

8

permalink this comment AkaXakA Mon Dec 12, 2005 at 12.47 pm

Good trick that!


gravatar

9

permalink this comment Glen C. Mon Dec 12, 2005 at 04.19 pm

Well, if you want full comptability and no pesky extaneous elements, try this.


gravatar

10

permalink this comment Andyman3000 Mon Dec 12, 2005 at 05.08 pm

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?


gravatar

11

permalink this comment Veerle Tue Dec 13, 2005 at 03.15 am

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.


gravatar

12

permalink this comment Jens Meiert Tue Dec 13, 2005 at 07.46 am

(Mistake: “float:clear”)


gravatar

13

permalink this comment Veerle Tue Dec 13, 2005 at 07.56 am

Oops thx Jens ;-)


gravatar

14

permalink this comment Jonathan Snook Tue Dec 13, 2005 at 10.55 am

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.


gravatar

15

permalink this comment Cody Tue Dec 13, 2005 at 11.14 am

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.


gravatar

16

permalink this comment Veerle Tue Dec 13, 2005 at 11.34 am

@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).


gravatar

17

permalink this comment Jonathan Snook Tue Dec 13, 2005 at 11.38 am

Sorry if I didn’t come off as appreciative of the tip. Kudos for sure!


gravatar

18

permalink this comment Veerle Tue Dec 13, 2005 at 11.43 am

@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.


gravatar

19

permalink this comment DirtyF Wed Dec 14, 2005 at 05.40 am

When IE 7 ships maybe we’ll use see more pseudo elements like :

img:after {
clear : both;
}

Sorry for old browsers.


gravatar

20

permalink this comment shannon Wed Dec 14, 2005 at 07.22 pm

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/


gravatar

21

permalink this comment Veerle Thu Dec 15, 2005 at 08.16 am

@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.


gravatar

22

permalink this comment Analgesia Fri Dec 30, 2005 at 11.53 am

John has solved the same problem:
http://www.positioniseverything.net/easyclearing.html

this includes a IE5Mac solution


gravatar

23

permalink this comment volkan Sat Dec 31, 2005 at 03.40 am

Thanks a bunch!

This tip will be a great time saver for the product gallery that I’m designing.

Happy new year!


gravatar

24

permalink this comment goose23 Sun Jan 1, 2006 at 03.44 am

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


gravatar

25

permalink this comment Mark Sat Jan 7, 2006 at 03.47 am

Or you could just do something like

.clearing {
height:0;
clear:both;
}

Works fine in everything although IE win adds some space to it.


gravatar

26

permalink this comment Chryzalis.com Tue Apr 4, 2006 at 07.08 am

Try like this:
.clearing {
height:0;
clear:both;
font-size:0;
}



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist