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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Container div not extending downwards to hold other divs

    Hi all,

    I have an issue with a css layout that I just don't understand and which I have been trying to resolve for days now without success.

    I have a container div and within it I have two other divs, one floated right and one floated left.

    The problem is that the container div does not seem to grow flexibly with the content and size of the two divs inside it.

    Here is the css:

    Code:
    #lowerarea {
    margin:0 auto;
    width:892px; /*was 894*/
    margin-top:3px;
    clear:both;
    background-color:#FFFFFF;
    border:1px solid #000000; /*added for emphasis*/
    }
    
    #lowerright {
    float:right;
    width:279px; /*280px*/
    background-color:#FFFFFF;
    /*height:100%;*/
    }
    
    #lowerleft {
    float:left;
    width:613px; /*614*/
    /*height:100%;*/
    background-color:#FFFFFF;
    }
    and here is the html:

    Code:
    <div id="lowerarea">
                    
       <div id="lowerleft">
          <h2>Latest News</h2>
    
       </div>
                    
       <div id="lowerright">
          <h2>Latest Images</h2>
    
       </div>
               
    </div>
    a screenshot of what this looks like at the moment is attached.

    You can see the black border at the top, this belongs to #lowerarea, but then #lowerarea just seems to disappear behind the two divs that are inside it and it wont extend to the bottom.

    Any idea what I have done wrong?

    Thank you!
    Attached Thumbnails Attached Thumbnails Container div not extending downwards to hold other divs-screen-shot-2010-01-06-wednesday-6-january-2010-11.54.28-am.jpg  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You need to clear your floats. Try setting overflow:auto; to #lowerarea.
    See www.quirksmode.org/css/clearing.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    You need to clear your floats. Try setting overflow:auto; to #lowerarea.
    See www.quirksmode.org/css/clearing.html
    Thank you so much.

    overflow:auto; seems to have done it, I add it to #lowerarea and now it extends nicely all the way to include the two contained divs.

    Thank you, thank you, thank you


  •  

    Posting Permissions

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