Could someone tell me how I can stretch the main content and navigation menu to always be the same height as the wrapper, no matter how much content they have?
CSS Code
Code:
html,body {
background-color: silver;
margin: 0;
}
div#wrapper {
background-color: white;
width: 800px;
min-height: 900px;
margin-left: auto;
margin-right: auto;
}
div#header {
text-align: center;
background-color: yellow;
min-height: 100px;
}
div#main {
background-color: orange;
width: 80%;
float: right;
}
div#menu {
background-color: purple;
width: 20%;
}
p {
margin: 0;
}
h1 {
margin: 0;
}
HTML 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">
<head>
<title>Default Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id=wrapper>
<div id=header><h1>Header</h1></div>
<div id=main><p>Main Content</p></div>
<div id=menu><p>Navigation Menu</p></div>
</div>
</body>
</html>
|
