Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    btc
    btc is offline
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to remove gaps left/right of fixed height auto width layer

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    btc
    btc is offline
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by btc View Post
    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. 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 to link a separate style sheet with additional styles for IE6.
    Quote Originally Posted by btc View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •