The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

Collapse empty DIV elements

Apr11

Written by:
2009/04/11 12:37 PM RssIcon

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.

Tags:
Categories:
blog comments powered by Disqus

3 comment(s) so far...


Gravatar

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
Gravatar

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
Gravatar

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
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<February 2017>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
2627281234
567891011
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize

Mon, 26 May 2014 13:39:24 -0500

Mon, 19 May 2014 13:10:38 -0500

Tue, 13 May 2014 05:00:08 -0500

Mon, 12 May 2014 05:00:43 -0500

Sun, 11 May 2014 05:00:26 -0500

Tue, 06 May 2014 05:00:02 -0500

Mon, 05 May 2014 05:00:34 -0500

Fri, 02 May 2014 05:00:52 -0500

Thu, 01 May 2014 05:00:00 -0500

Fri, 18 Apr 2014 05:00:38 -0500

Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print