I've been utilizing this code to design the layout of my website. However, I've encountered an issue where the "left" and "right" divs are not displaying on the screen (they only show up when I set their height in pixels, not in percentages). Any suggestions on how I can resolve this problem?
<!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>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* {
margin: 0;
}
html,
body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -44px; /* -44px being the size of the footer */
}
#header {
height: 86px;
}
#footer,
#push {
height: 44px;
}
#left
{
width:8px;
width:100%;
background-color:blue;
float:left;
}
#right
{
width:8px;
width:100%;
background-color:blue;
float:right;
}
#left: first,
#right: first,
{
content: "";
height: 0;
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">
<div id="left"></div>
content
<div id="right"></div>
</div>
<div id="push"></div>
</div>
<div id="footer">footer</div>
</body>
</html>