We know that using CSS and DIV elements is the most versatile way to layout a web page. But when you drop tables you lose the browser’s native ability to resize elements properly when the user changes the window size, views on a mobile device, or changes the font size. Eli details some of the common problems on his blog.
One situation I was getting annoyed with is setting up a horizontal link bar, much like you’d find in the header of many websites. If you set all the elements to float left, you have to manually specify a height of the overall horizontal UL or DIV that encapsulates the floating elements. This is fine, except if you don’t know if the floating elements will fit inside a page width. You might want the floating elements to spill over to the next line, and appropriately push the content of the page down.
I haven’t figured out how to do this using just DIVs and CSS. But I found if you wrap the horizontal bar in a table/tr/td, the table will automatically expand to contain all the floating elements, effectively giving the whole thing a proper height. This way you can set a background on the table and it will always be shown.
View the HTML example of this problem: Floating Element Test
