Original Post
I'm trying to do a nice CSS layout for a small site I'm working on, but I'm having a few issues. Firstly, my code so far: Alright, so the 'content' of it so far is just so I can see where things are going. I did have borders on everything for this purpose, but I removed them when I discovered they were actually causing a slightly different behavior with some of the things I was trying. If you need a clearer idea of the layout, adding some borders back in temporarily may help. Anyways, onto my problem... The top area (div#banner) is just fine, and the others have gone below it. Below this should be a 2-panel area, with a small menu bar (div#leftbar) running down the left of the main content area (div#main). I've floated the menu bar to the left, and this works fine, it sits on the left of the page, and content of the main div flows around it. However, the menu bar's height is being automatically set to that of it's content, and I want it to be the full length of the main div next to it (which will depend on the content on each page). This can be achieved by setting a pixel value for the height of the div, but then I have to set it for each individual page, and if the content is altered it would have to be manually edited (I plan to make the stylesheet external once it's working btw). Is there any way I can get the leftbar to automatically match the height of the main content area? I'd get this behavior for free with a table layout, but I'd really rather not use one. Thanks in advance for any help/advice. [smile]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="screen,projection">
<!--
body {
margin: 0px;
padding: 0px;
}
div#banner {
height: 120px;
}
div#leftbar {
float: left;
width: 120px;
height: 100%;
}
div#main {
}
-->
</style>
</head>
<body>
leftbar!
main!
also in main!
also in main!
</body>
</html>
