Hi,
I have a webpage with the following div's.
<div id="main">
<div id=left></div>
<div id=right></div>
</div>
As the body of the page is background color blue and assume div left and div right are white. when the content of say right div reaches the height of div main, div main does not expand so it looks odd.
How do I get div main expand when div right expands past it?
Hope this is not confusing.
Malcolm
I am assuming "left" and "right" means you are floating them left and right with your CSS.
If so, you need to clear them. Make your HTML look like this:
<div id="main">
<div id=left></div>
<div id=right></div>
<br style='clear: both;'>
</div>
You could try something like this:
<html>
<head>
<style>
#equal {
overflow: hidden;
}
#left, #right{
padding-bottom: 5000px;
margin-bottom: -5000px;
width: 150px;
}
#left {
float: left;
background-color: red;
}
#right {
float: right;
background-color: green;
}
</style>
</head>
<body>
<div id="main">
<div id="equal">
<div id="left">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div id="right">blah blah blah blah blah blah </div>
</div>
</div>
</body>
</html>
may be #left,#right is floating,and as you say "reach the height of #main",you set expicitly the height of #main div,right?
try the following,hope this gonna help:
You should give overflow: hidden property to #main's CSS. Also you should always quote the attribute values. (You did not when assigning id's to the #left and #right)