NeoDreamer
April 23rd, 2007, 01:45 PM
http://img49.imageshack.us/img49/767/kir3vo6.th.gif (http://img49.imageshack.us/my.php?image=kir3vo6.gif)
So I did some work since the previous post. Basically, my page is divided into two columns (Col 1 = 800px, Col 2 = 200px). For some reason, the right column's rows are not filling up all the space.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DesignAxe</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="ok" />
<meta name="keywords" content="ok" />
<meta name="author" content="ok" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<div id="page">
<div id="user">
user
</div>
<div id="nav">
nav
</div>
<div id="user-shadow">
user-shadow
</div>
<div id="nav-shadow">
nav-shadow
</div>
<div id="side">
side
</div>
<div id="main">
main
</div>
<div id="bottom">
<div id="aux-shadow">
aux-shadow
</div>
<div id="footer-shadow">
footer-shadow
</div>
<div id="aux">
aux
</div>
<div id="footer">
footer
</div>
</div>
</div>
</body>
</html>
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 62.5%;
color: #666666;
background: #ffffff;
margin: 0px;
}
#page {
margin: auto;
width: 1000px;
}
#nav {
margin-right: 200px;
background: #444d45; // black
width: 800px;
height: 45px;
}
#user {
float: right;
background: #444d45; // black
width: 200px;
height: 45px;
}
#nav-shadow {
margin-right: 200px;
background: #d1d1d1; // gray
width: 800px;
height: 10px;
}
#user-shadow {
float: right;
background: #b1b5c4; // gray-blue
width: 200px;
height: 10px;
}
#main {
margin-right: 200px;
background: #ffffff; // white
width: 800px;
}
#side {
float: right;
background: #e6ebff; // blue
width: 200px;
}
#footer-shadow {
margin-right: 200px;
background: #d1d1d1; // gray
width: 800px;
height: 10px;
}
#aux-shadow {
float: right;
background: #b1b5c4; // gray-blue
width: 200px;
height: 10px;
}
#bottom {
clear: both;
}
#footer {
margin-right: 200px;
background: #444d45; // black
width: 800px;
height: 30px;
}
#aux {
float: right;
background: #444d45; // black
width: 200px;
height: 30px;
}