PDA

View Full Version : DIV height issues


ShaneS
03-15-2008, 12:54 AM
Hi all.
This should be an easy one for someone, and I feel embarrassed asking it! I'm trying to get a div to follow the height of a div which is inside. I've set-up the following as a simple example to highlight my issues.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
background-color: #0000FF;
width: 400px;
height: auto;
margin-right: auto;
margin-left: auto;
}
#left {
background-color: #FF0000;
float: left;
width: 200px;
height: 200px;
}
#right {
background-color: #00CC00;
float: left;
height: 300px;
width: 200px;
}
-->
</style>
</head>
<body>

<div id="container">

<div id="left"></div>
<div id="right"></div>

</div>

</body>
</html>




The container div has a blue background, and I want the end product to look like the first thumbnail below (blue background for container div extends to the height of the right div) which it does in IE7, (even though the Dreamweaver preview doesn't show it). However, in Firefox, the container div height does not extend to the right div height, and the second thumbnail shows the result (the white page background replaces the blue div background).

How can I easily get the container div height to follow the right div height without setting a value (the right div will be an auto height depending on the text inside). I've tried setting to 100% with no difference.

I'm sure there is a simple solution.

Thanks, Shane

student101
03-15-2008, 06:20 PM
Place another DIV directly after 'left' (a footer even) but inside the container, apply a clear: both; to the selector

Otherwise add this:
html, body{height:100%;}Otherwise remove the part in red:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Other than that google it.

Cheers

edbr
03-17-2008, 10:25 AM
im not sure what you ask or tjhe answer but its late here. if you want to have blue to the bottom of the left side I would use a faux image in your container 200 px wide a couple of pixels high and repeat it downwards.
If i have understood your question correctly