...

View Full Version : How to remove gaps left/right of fixed height auto width layer



btc
05-21-2007, 10:41 AM
Hi,
I have a simple layout of left and right floating layers of fixed height with an auto width centre layer all within a container. However, I get gaps left and right of the centre layer when I specify the same fixed height as left and right floating layers. I need the centre layer to be the same height as the left/right layers.

I have tried all sorts of combinations and forum threads, but can't crack it!

I am testing in IE6.

here is what I have - html

<div id="content">
<div id="col1">col1
</div>
<div id="col3">col3
</div>
<div id="col2">col2
</div>
</div>

and - css

body {
margin: 0px;
padding: 0px;
}

div#content {
float: left;
left: 0px;
top: 0px;
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
}

div#col1 {
background-color:#009966;
float: left;
height: 166px;
width: 180px;
margin: 0px;
padding: 0px;
}

div#col2 {
background-color:#CC3300;
height: 166px;
width: auto;
}

div#col3 {
background-color:#FFCC33;
height: 166px;
width: 180px;
float: right;
}

any ideas much appreciated.

Dan

_Aerospace_Eng_
05-21-2007, 11:05 AM
I think you have a misunderstanding of how height:auto; works. Its not meant to resize the height of the divs to the largest div. To get this effect you will need to use at least 2 repeating background images. Example here: http://bonrouge.com/3c-hf-fluid.php

btc
05-21-2007, 11:24 AM
I am trying to fix the height of the divs, and get the same problem if I set the height on the content div or remove the content div. The problem appears when I set a fixed height for the centre div.

Thanks
Dan

koyama
05-22-2007, 03:10 PM
However, I get gaps left and right of the centre layer when I specify the same fixed height as left and right floating layers.
I guess that you are viewing the page in IE6. What you are seeing is the IE6 3px gap (http://www.positioniseverything.net/explorer/threepxtest.html). The article discusses the special case of the bug where it results in a text jog, but the cause is the same.

To solve your problem, you will have to give your floated left column a 3px negative right margin and your floated right column a 3px negative left margin. Be sure to only feed IE6 with the correction. For that you can use a conditional comment (http://www.quirksmode.org/css/condcom.html) to link a separate style sheet with additional styles for IE6.

The problem appears when I set a fixed height for the centre div.
Yes, but it also appears without the fixed height. Look at the text in the center column. The line boxes in the center column next to the floats are still pushed by 3px. However, it is not easily noticed because the background color of the center column is filling the gap.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum