Empty Spacing Divs Disappear

Question

Hello,

not sure why this isn't working-- i have 3 divs where the two on the side are empty, and all my content in the middle. IE6 is apparently ignoring the empty divs, as the content is pushed to the left. Any ideas what the problem could be?

.sidebar {
float: left;
width: 25%;
height:auto;
visibility:hidden;
font-size:1px;
line-height:0;
}

.main {
width: 50%;
height:auto;
float:left;
}
<div class="sidebar"><p> </p></div>
<div class="main">
...
</div>
<div class="sidebar"><p> </p></div>

I've tried putting empty comments instead of empty paragraphs in the divs, tried putting   in the divs, anything the internet said to do, to no luck. let me know if you want to see the content in the main.

Thanks!

Answer 1

I believe this is a situation where if the divs on the side are going to remain empty, you'll have to specify height or at least a min-height to make it show up. Alternately, again if they're going to remain empty, you could simply remove them and use margin: 0 auto 0 auto to center your middle column. IE6 in particular has some issues with non-breaking spaces that can cause all sorts of weird things to happen, but only in certain specific versions of IE6. Ahh, the joys of browsers.

Note that height:auto won't stretch anything if it doesn't know what to stretch to, just like height: 100% won't work without a div of known size to 100% to. From your question it doesn't seem like you're trying to stretch it to fill the screen, but it's something to be aware of.

A css framework such as 960.gs, YUI grids, or Blueprint would make this a cakewalk...I'm just sayin'

Answer 2

I'm not seeing the bug on my end in IE6. I pasted your example into a .html doc and it worked correctly (IE6 respected the hidden .sidebar's).

Out of curiosity, what are you trying to do? If you just want a centered .main container, you can do it with the following markup:

<div style="width: 50%; margin: 0 auto;">
    Centered content, 50% width of its parent container.
</div>

Answer 3

I think what's happening is that your divs are not actually floating.

if you are doing 25%-50%-25%, IE will not have enough room for them to float.

Try testing with something smaller, like 20%-45%-20%

It sounds ridiculous, but it's true. IE6 will not allow you to add width percentage up to 100%.

Also, we need to see more code to further troubleshoot this for you... http://www.jsfiddle.net/

Answer 4

The HTML element for a non-breaking space is

 

Which you can use to make the divs show up. This can cause issues if you want a very small div, since the space has a line-height and all that, but it can be useful in some cases.