Collapse empty DIV elements
Apr11Written by:
2009/04/11 12:37 PM 
Most web developers are used to working with tables. We have used tables for layout purposes for many years now. Primarily because its easy to visualise. The editors can give you a accurate WISIWIG representation. But times change, and the latest from all the web gurus is to use CSS Layout, with DIV elements. This is great. You get good flexibility. But like all things there are pros and cons to everything. One of the things I battled with is collapsing Empty DIV elements. In a table, the cell collapses nicely, but with DIVs that's a little different.
I am going through a process of redesigning my DNN skin for CSS layout as opposed to a Table layout. I hit many walls and problems when trying to do this. Your whole thinking has to change. For those who hate and despise table layouts, let me just say this. There are certain benefits to table layout. Like everything, there are pros and cons.
Of the many that I faced, collapsing DIV elements was one of them. In traditional cells and tables, if the table, row, cell was empty, it would just collapse. But not so in a DIV. What you potentially end up with is large amounts of white space.
So I browsed the net and found a few solutions.
First thing to do is to add a display:inline property to your DIV. Then add the overflow property and set it to hidden. Most of the tutorials on this subject suggested this method. So I tried them, and guess what, they did not work. I tried about a hundred other thing, until I came across a very obscure example.
The thing that did it, was to add a blank comment in the div. <-- -->. When I did this, my empty DIVs collapsed like empty table rows Fantastic.
Go figure. Who would have thought such a weird workaround was possible. But anyway, hope this helps you in your tableless layout efforts.
If any have other suggestions, I would be glad to hear from you.
blog comments powered by 3 comment(s) so far...
Re: Collapse empty DIV elements
Hi Robert that's so rare and i have the same strange case curiosly, but in my case i have a table inside of my div element. I did what you say about the display and overflow properties and didn't work. I can't replace my table for your workaround for obvious reasons. Any idea for fixing this?
By Nanoatzen Castro on
2009/04/14 08:58 AM
|
Re: Collapse empty DIV elements
Nanoatzen,
Having tables inside a dive element, means that the div element is not empty, although the table might be empty. The difference is that the table dimensions create the effect of empty space. IF you look at the generated HTML, you will see the table element.
Of the top of my head, I can't think of another workaround, but will investigate and report back.
By Nanoatzen Castro on
2009/04/14 09:04 AM
|
Re: Collapse empty DIV elements
Good stuff, weird fix. I'm trying this out on a DNN skin and I have a 3 column layout for divs, each div is float:left so they'll sit next to each other. Right now each div has width set in pixels. When i make the changes above, to me, it would make sense that i take the width out of the center column so it can grow in whatever space is available. However, when i take the width property out of the center column it moves each div to the next line. Any ideas how to fix this?
By Jimmy C on
2009/08/20 05:27 PM
|