is display:table good practice?

[deane034]

Hi All,

I’m often faced with this problem. I have a website with multiple pages sharing the outer layout and often the content of the pages goes in a container DIV. However, the inside content is often floated around to create the layout I want. But I want the height to be variable as sometimes the content is generated via CMS and I don’t exactly know the height to set. Doing this, as you probably well know will result in the content elements not contained in the div, resulting in background color issues, and other layout issues in the footer, etc.

So as a cheap trick i set the container div’s Display:table css property to get the variable height. I want to know if this is good practice? what are the repurcussions of doing this? and also, if this is not good practice, how do you solve the problem of having variable heights for containers which has elements floated?

Thanks in advance.

[JaredAM]

Humm, I personally don’t see anything wrong with it. It’s better than using table table (unless you’re displaying table type data). As far as I know, it’s no more overhead than using display:none or display:normal.

[box]

I wouldn’t say it was bad practice. As long as your HTML is left ‘pure’ and semantic, then use whatever CSS that works. If display:table does what you want it to do after testing it in all browsers – then I don’t see anything wrong with it.

[TheDoc]

I have never needed to use display:table before.

I think perhaps before using it you might want to consider other avenues. Height isn’t required to make floated elements work properly, but a width usually is.

[deane034]

Thanks for your thoughts :)

[deane034]

In fact this is a terrible practice, do not use it at all. Have terrible rendering issues on versions of Firefox and Opera. This happened due to my ignorance of clearfix and other techniques for wanting a container expand to floated contents.

[Author]

Posts