Forum Moderators: not2easy
I'm making my first layout based on CSS, it has actually been a challenge but I like it :)
The problem I'm having is that I want a traditional layout with a sidemenu bar that extends all the way down my page.
sidemenu is set as a floating menu to the left and has images inside it.
The problem is that once the content extends below the sidemenu, it wraps underneath. I know this is normal but I don't want it that way. I want sidemenu to behave like it's own column or table so nothing appears underneath it.
Someone please help :)
Thanks!
I've set up my div like so:
<div id="mainbody">
<div id="sidemenu">
</div>
<div id="content">
</div>
</div>
Then do something like this:
<html><body>
<div id="wrapper">
<div id="sidebar">
sidebar stuff here
</div>
<div id="maincontent">
main content stuff here
</div>
<hr />
</div>
</body></html>
Your CSS would look something like so:
#wrapper {
width:600px;
background:url("image.jpg");
}
#sidebar {
width:200px;
float:left;
background:transparent;
}
#maincontent {
width:400px;
float:right;
background:transparent;
}
hr {
clear:both;
display:block;
visibility:hidden;
}
What happens here is that the wrapper holds it all in, and contains that background image for your sidebar and maincontent areas. The maincontent and sidebar themselves have no background at all, so the wrapper background shows through and gives the impression that the background goes all the way down. The hr tag (or you can insert a footer div, your choice) is under the two floated divs to clear them and bring the wrapper div all the way down below them. The content in either the sidebar or maincontent - whichever one is longer - will determine how far the "backgournd" is pushed down - but the content of each will stay in their resective divs and not "go under" either or.
Hope that made sense to you (and it's *very* basic - you can add in your own padding and all that - I just wanted to give you an idea!)
Hope that helps :)
