|
|
Posted by Bazley on 12/29/07 20:47
Aha! I see. Thank you Bone chap. But now I have a new problem. In fact
there are two things not working: (see new code at bottom)
1) The surround div (green) responds correctly to the two expanding
column divs contained within (yellow and cyan). But the main div
(black) does not respond to the expanding surround div. Instead it
just stays put at its min-height setting of 450px. Why does the main
div not expand too to keep up with the surround div?
2) None of the height: 100%; settings are working. I would have
thought the two column divs should always expand to be the same height
as the surround div, and the surround div should always expand to be
the same height as the main div. Why is it not doing this?
HTML source:
<!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" />
<link rel="stylesheet" type="text/css" href="mysite.css" />
</head>
<body>
<div id="main">
<div id="surround">
<div id="left_column">
help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help
</div>
<div id="right_column">
help<br>help<br>help<br>help<br>help<br>
</div>
</div>
</div>
</body>
</html>
CSS source:
html, body, main, surround, left_column, right_column {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background-color: gray;
}
#main {
position: relative;
margin: auto;
top: 15px;
width: 900px;
min-height: 450px;
background-color: black;
}
#surround {
float: left;
width: 800px;
height: 100%;
background-color: green;
}
#left_column {
float: left;
width: 40%;
height: 100%;
background-color: yellow;
}
#right_column {
float: right;
width: 40%;
height: 100%;
background-color: cyan;
}
[Back to original message]
|