...

View Full Version : Balancing two divs in height without using tables?



Shadowfox
07-08-2007, 08:00 PM
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?

koyama
07-08-2007, 08:26 PM
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?

Shadowfox
07-08-2007, 08:47 PM
make a .html file with the 2 examples
1st shows the current situation
2nd shows desired situation

1:

<!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

<!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

koyama
07-08-2007, 09:41 PM
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 (http://www.satzansatz.de/cssd/onhavinglayout.html) (e.g. when an explicit width is set). To explicitly make the parent contain its floats you can use overflow: hidden (http://www.quirksmode.org/css/clearing.html).

Here is your updated 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>

Shadowfox
07-08-2007, 10:17 PM
Thank you, koyama.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum