SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS overflow property in nested DIVs(Firefox issue)

    Hi,

    I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful.

    <html>
    <head>
    <title>My Page</title>
    <style type="text/css">

    .main
    {

    position:relative;
    width:800px;
    display:block;
    border:1px solid #000000;
    margin:auto;
    padding:10px 10px 10px 10px;
    background:#BABB99;
    height:100%;
    overflow:hidden;
    }


    .main-1a
    {
    width:780px;
    float:left;
    background:#FFFFFF;
    border:1px solid #FF0000;
    padding:10px 10px 10px 10px;
    }

    .main-1a-child
    {
    width:760px;
    float:left;
    border:1px solid #000000;
    padding:10px 10px 10px 10px;
    background:#BABB99;
    }
    </style>
    </head>

    <body>
    <div class="main">
    <div class="main-1a">
    <div class="main-1a-child">
    <p>text of div1 a2</p>
    <p>snkjkjsd</p>
    <p>snkjkjsd</p>
    <p>snkjkjsd</p>
    </div>
    </div>

    </div>
    </body>
    </html>

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand your question.

    On FF and other browsers overflow other than the default visible makes the browser calculate if it need to hide or scroll the contained content, instead of just overflow it. When the height is unset (default auto) it grows the height. (Width auto will stretch to parent inner edges.) In IE also "haslayout" will do the same. In the example the 900px width triggers IE haslayout.
    In your example the width will be two pixels short in main and main-1a and content width overflow is hidden. But not in IE6 because IE6 does not respect the given width.
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

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