OK I did research, I followed the links in this and other forums, and still I can;t get this to work.
I'm trying to make a three column layout for my site using divs; the nav to the left, content in the middle, and ads to the right. All three divs are inside a wrap div. I want the nav and ad div to stretch as far as the main content does, but after extensive research I'm still unable to get this to work. I set the height to 100% in all the containers, including html and body, and still the side divs only stretch up to a certain point, and do not reach the bottom.
Here's my 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" xml:lang="en" lang="en">
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/JavaScript">
A script for the random ads.
</script>
<style type="text/css">
html, body {
height: 100%;
}
img { border: none; }
h1 {text-align: center; }
tr {vertical-align: up;}
body {
background-color: #808080;
}
#wrap {
width: 962px;
margin: 0 auto;
background-color: #FF6600;
text-align: middle;
height: 100%;
min-height: 100%;
}
#nav {
float: left;
width: 116px;
height: 100%;
min-height: 100%;
background: url(halflifemenu2.jpg);
}
#main {
link: #920000;
vlink: #920000;
text-align: left;
text-color: white;
background: url(hlbg.JPG);
width: 685px;
float: left;
padding: 15px;
height: 100%;
min-height: 100%;
}
#right_bar {
background: url(hlbg.JPG);
height: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<map id="valvemap" name="valvemap">
<area href="http://steampowered.com" alt="Steam" title="Steam" shape="rect" coords="0,0,130,51" />
<area href="http://www.valvesoftware.com/" alt="Valve Software" title="Valve Software" shape="rect" coords="0,51,130,115" />
</map>
<img src="halflifelambda.JPG" alt="Half Life Symbol" /><img src="halflifelogo.JPG" alt="Half Life logo" /><img src="valvelogo.JPG" alt="Valve
logo" usemap="#valvemap"/>
</div>
<div id="nav">
<table border="1" width="112">
<tr><td><a href="link.html"><b>Option1</b></a></td></tr>
<tr><td><a href="link.html"><b>Option2 etc</b></a></td></tr>
</table>
</div>
<div id="main">
<h1>Heading</h1>
blah blah text text<hr />
<br />
<table>
<tr>
<td>
<img src="img.jpg" alt="alt" />
</td>
<td>
blah blah text text
<br />
</td>
</tr>
<tr>
<td>
<img src="img.jpg" alt="alt" />
</td>
<td>
blah blah text text.
</td>
</tr>
</table>
</div>
<div id="rightbar">
<script type="text/JavaScript">
showImage();
</script>
</div>
</div>
</body>
</html>
Last edited by BlackRiven; 06-29-2008 at 11:38 AM..
|
