Divs Gap Demo
31 January 2006 · Last updated: 11 December 2006
The problem: how to put two floated divs inside a container div which expands to the same height. If you try this, something unexpected happens: the container div doesn't expand! So now you have two floats, which would make ideal columns in a two-column layout, but no obvious way to stretch the container div. So you can't add a border around the floats, put in a background image, and so on.
The solution: put in an extra div at the bottom, positioned relatively, which forces the container div to stretch down to include it. With a bit of extra work, you can hide the div so it appears like your two floats fit nicely into the container.
I got the solution from Alex Robinson's One True Layout, which offers loads of solutions to achieving a decent three-column layout, including one where each column can be the same height. I actually ignored the code Alex used there and rewrote it to work for me.
But when I came to test my code in the main Windows browsers, something was wrong: it worked perfectly in Opera 9 (Preview 1) and Firefox 1.5, but not in Internet Explorer 6. Damn you IE6! Was it another bug? Would my layout ever work in this browser?
The problem centred around the first floated column on the left, and the div underneath it that stretches the container to the required height. I found there was a thin gap between the two divs. No matter what I tried, I couldn't remove it. There was only one thing to do: surf to Position Is Everything (PIE) and check their list of IE bugs.
Success! It turned out to be the mysterious 'hasLayout' to blame. I tried a fix that sets this property on an element and suddenly the gap between the divs disappeared. I would not have been able to work that one out myself, so many thanks to the guys at PIE!
The odd thing is, I applied the fix to the container div, not the floated divs. And yet it was those that had a gap. Well I guess the fix filters down to children of the container div too, but I'm no expert. And frankly I don't want to waste time trying to figure out the weird way IE works.
Divs Gap Demo
Here is a demo I made illustrating the problem. There are 3 sets of similar divs. Observe:
- The first set at the top is the ideal I was trying to achieve. It gives you two columns inside a container that fits the height. Set the height to 1% and don't put anything in the last div in order to hide it. (Sadly IE can't even get that right, but it's near enough.)
I have added a right border to the first column and the extra div, which I've called the "brick", since it sits at the bottom, and holds the container down. The borders give the illusion of a central line between the two columns. Just like a table!
- The second set shows the divs with differently coloured borders indicating the construction. There should be no gap between the red and the blue horizontal lines.
- The third set is the same as the second, but without the IE fix applied. In IE, a gap appears between the left column and the brick. Agh!
I'm also seeing IE fail to draw the top border of the last set after switching to another window and back. I once gave up on a layout because IE couldn't draw the simple borders around the divs consistently. Maybe this demo works for you.
Extra
I also discovered something useful while working on the demo. It's possible to turn off the border edge around the main window in IE! Applying no border to the body element won't work, but strangely this works:
html {border:0;}
Something to remember for future layouts.
Comments (3)
Comments are locked on this topic. Thanks to everyone who posted a comment.
- Dylan:
That html border thing is really weird...the border actually extends out around the scrollbar and yet it's just a border applied to the html element, very strange.
Posted on 1 February 2006 at 3:10 am ¶ - Chris Hester:
I just installed the IE Developer Toolbar, which works in similar ways to the Firefox Web Developer one. It even has a built-in DOM Explorer! Using this on a page, I see the HTML element has the following properties set in IE6:
borderBottomStyle: inset
borderLeftStyle: inset
borderRightStyle: inset
borderStyle: inset
borderTopStyle: inset
hasLayout: -1
overflow: scroll
overflowX: auto
overflowY: scroll
This sheds some light on the matter!
BTW, you can get the IE toolbar from Microsoft:
http://www.microsoft.com/downloads/details.aspx?
FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
Posted on 1 February 2006 at 11:31 am ¶ - Dylan:
I actually already have the toolbar but didn't think to use it. Interesting info nonetheless.
Posted on 1 February 2006 at 8:35 pm ¶
