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
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts

    container div height in Firefox

    Hi,

    I have a div (container) that contains 6 divs (subcontainer) arranged in 3 rows of 2 columns using left float.

    For some reason in Firefox, the height of the container does not adjust to fit its contents. This problem does not occur in IE.

    Here is a simple bit of code to illustrate the problem.

    Code:
    <html>
    <head>
    <style>
    #container{
       width:410px;
       border:3px solid #dd0000;
       padding:5px;
    }
    
    .subcontainer{
       width:200px;
       height:100px;
       border:1px solid #000;
       float:left
    }
    </style>
    </head>
    <body>
    <div id="container">
     <div class="subcontainer">Text 1</div>
     <div class="subcontainer">Text 2</div>
     <div class="subcontainer">Text 3</div>
     <div class="subcontainer">Text 4</div>
     <div class="subcontainer">Text 5</div>
     <div class="subcontainer">Text 6</div>
     </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Figured it out. Adding overflow:hidden; to the container cures the problem. I tried overflow:visible; as this seems more logical than hidden... but when has web design been logical?!

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by htcilt View Post
    Figured it out. Adding overflow:hidden; to the container cures the problem. I tried overflow:visible; as this seems more logical than hidden... but when has web design been logical?!
    I just registered intending to post a thread for the exact same problem, when I saw yours. This solved my problem too, so thanks for the inadvertent help. :-)


  •  

    Posting Permissions

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