www.webdeveloper.com
Results 1 to 5 of 5

Thread: Nested Divs in IE6 problem

  1. #1
    Join Date
    Nov 2006
    Posts
    11

    Nested Divs in IE6 problem

    I've looked in vain for a solution to this, validated code and wasted hours of time. I want to create a simple layout consisting of a series of three columns nested inside one column of another series of three columns, resulting in a five column layout. With no white space or gaps between the columns. It works well in everything except IE6, which puts a margin either side of the nested divs, pushing the set of columns beneath the container. Any help would be hugely appreciated! My CSS is below…

    body
    {
    margin: 0;
    padding: 0;
    font-size: 95%;
    font-family: georgia, times, "times new roman", serif;
    color: #000;
    background-color: #fff;
    }

    #mainWrap {
    width: 790px;
    background-color: orange;
    }


    #mainWrapOne {
    width: 178px;
    background-color: green;
    float: left;
    }

    #mainWrapTwo {
    width: 459px;
    background-color: red;

    }


    #threeColWrap
    {

    background-position: right;
    width: 459px;
    overflow: hidden;
    }


    #colOne
    {
    float: left;
    width: 153px;
    background-color: #333;
    }


    #colTwo
    {
    margin-left: 153px;
    margin-right: 153px;
    background-color: #666;
    }


    #colThree
    {
    float: right;
    width: 153px;
    margin: 0;
    color: #000;
    background-color: #ccc;
    }

    p {
    margin: 0;
    }

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Try this:
    Code:
    * {margin: 0; padding: 0;}
    WebJoel taught me that one, and it's saved me many an IE woe.
    KDLA

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by pippin62
    I've looked in vain for a solution to this.... ....My CSS is below…
    Your CSS looks fine. Correct, anyway. But without seeing the HTML also... it's anybody's guess what is wrong. (and I'm not willing to write a "...simple layout consisting of a series of three columns nested inside one column of another series of three columns, resulting in a five column layout. With no white space or gaps between the columns..." to try to test this...)

  5. #5
    Join Date
    Nov 2006
    Posts
    11
    Hi,

    Thanks for all your replies. I think I have solved the problem myself.

    Here's my amended CSS:

    body
    {
    margin: 0;
    padding: 0;
    }


    #mainColWrap
    {
    width: 500px;
    background-color: blue;
    height: 150px;
    }


    #mainColOne
    {
    float: left;
    width: 100px;
    background-color: red;
    height: 120px;
    }


    #mainColTwo
    {
    float: left;
    width: 300px;
    background-color: green;
    height: 120px;
    }


    #mainColThree
    {
    float: left;
    width: 100px;
    background-color: yellow;
    height: 120px;
    }




    #threeColWrap
    {
    width: 300px;
    background-color: #999;
    height: 100px;
    }


    #colOne
    {
    float: left;
    width: 100px;
    background-color: #333;
    height: 90px;
    }


    #colThree
    {
    float: left;
    width: 100px;
    background-color: #ccc;
    height: 90px;
    }


    #colTwo
    {
    float: left;
    width: 100px;
    background-color: #666;
    height: 90px;
    }

    p {
    margin: 0;
    }
    And here's the HTML:
    <div id="mainColWrap">
    <div id="mainColOne"><p>One</p></div>
    <div id="mainColTwo">
    <div id="threeColWrap">
    <div id="colOne"><p>One</p></div>
    <div id="colTwo"><p>Two</p></div>
    <div id="colThree"><p>Three</p></div>
    </div>
    </div>
    <div id="mainColThree"><p>Three</p></div>
    </div>
    It seems fine in IE6, I don't know where I was going wrong before though.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles