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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Balancing two divs in height without using tables?

    code:
    <div style="height:auto">
    <div style="height: 50px;">ffdsf</div>
    <div style="height: 30px;">gffsd</div>
    </div>

    How can I get the first DIV resized to height=50px by the ones inside it. (I can use tables but I prefer asking for a different solution first)

    In order to make it easier to comprehend:
    In the above example, no matter the height of the inside DIVs the parent one keeps being height:0px in firefox.
    What I wish to do is to get it work like a table - resize itself according to its children.

    in a sentence: how can I get the parent DIV "fit to content" in FireFox like it does in IE?
    Last edited by Shadowfox; 07-08-2007 at 08:04 PM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    It sounds like the divs need to be side-by-side, but there is nothing in the example code that makes that happen. I suspect that the divs are floated. Can you please post a complete example that shows the problem?

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    make a .html file with the 2 examples
    1st shows the current situation
    2nd shows desired situation

    1:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
    <head>
    <title>BLA</title>
    </head>
    <body>
    
    <div style="width:500px; height:auto; background-color: black;">
    	<div style="float:left; margin-top: 10px; width:250px; height:100px; background-color: red;">text on red</div>
    	<div style="float:left; margin-top: 10px; width:250px; height:100px; background-color: blue;">text on blue</div>
    </div>
    
    </body>
    </html>
    2
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
    <head>
    <title>BLA</title>
    </head>
    <body>
    
    <div style="width:500px; height:300px; background-color: black;">
    	<div style="float:left; margin-top: 10px; width:250px; height:100px; background-color: red;">text on red</div>
    	<div style="float:left; margin-top: 10px; width:250px; height:100px; background-color: blue;">text on blue</div>
    </div>
    
    </body>
    </html>
    The idea is that I get the BLACK background behind the divs with red and blue backgrounds
    It just doesn't show when height is auto - I want it to get the height from the "highest" child div inside - be it the blue or the red one - you see just table-like behavior

    P.S. That is to be viewed on FireFox
    Last edited by Shadowfox; 07-08-2007 at 09:18 PM.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    The problem is that a float does not by default expand its parent. Well, due to a bug, it happens anyway in IE6/7 when the parent hasLayout (e.g. when an explicit width is set). To explicitly make the parent contain its floats you can use overflow: hidden.

    Here is your updated code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
    <head>
    <title>BLA</title>
    </head>
    <body>
    
    <div style="width:500px; height:auto; background-color: black; overflow: hidden">
    	<div style="float:left; margin-top: 10px; width:250px; height:100px; background-color: red;">text on red</div>
    	<div style="float:left; margin-top: 10px; width:250px; height:100px; background-color: blue;">text on blue</div>
    </div>
    
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Feb 2006
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, koyama.


  •  

    Posting Permissions

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