Forum Moderators: not2easy
I have a very simple site layout which has a header along the top of the page and i want to use a vertical backgorund image menu which repeats to 100% of whatever will be on the right hand side of it (which will be the content of the site)
I have a very simple <div id="menubackground"></div> as my html code and i have the following as my css code.
#menubackground
{
background: #000000;
float:left;
width:120px;
height:100%;
margin:0px;
}
Now i have changed the background from an image to a set color for testing purposes but no matter how much content is in the body of the web page the vertical menu just does not expand with the content.
I hope i have made this clear enough and would seriously appreciate some help.
First of all, putting "height:100%" will only make your background stretch to 100% of the browser window. So if the content expands, and you have to scroll, your background will be cut off, basically, where the end of the browser was when it first loaded. I'm guessing that's part of your problem?
I wish I could post links here, because I just did a tutorial on my site for this exact problem. But I'll re-write it here for ya.
Okay, so basically your HTML structure will look like so:
<body>
<div id="wrapper">
<div id="header">
header graphic here
</div>
<div id="content">
main content here
</div>
<div id="sidebar">
naviagtion here
</div>
<hr />
</div>
</body>
Now, I'm going to tell you how to do it for a fixed *width* site - meaning the page will be centered when browsers are bigger than 800x600. If you want it to expand in width, as well, let me know.
You need to also make an image that is 770 pixels wide and 1 pixel tall. It will be the background to both your content and your sidebar - so in this case, we'll say the sidebar area is 200px wide. So make your content area background the color you want for 570 pixels, and the sidebar content whatever it is for the last 200. For purposes of this example, we'll call it simply "image.gif".
Your CSS:
#wrapper {
width:770px;
margin:0 auto;
background:url("image.gif");}
#header {
width:770px;}
#content {
width:570px;
float:left;}
#sidebar {
width:200px;
float:right}
hr {
display:block;
clear:both;
visibility:hidden;}
So what this does is, the <hr> tag clears both your floated elements (the content and sidebar) and forces the #wrapper background to strecth down to whatever the longest point is - based upon which side has more content. Keeps both columns even, and you get your "100%" height issue resolved.
This, of course, is not the only way to do it, but it definitely works (it's my favorite version - I find it easiest to work with.)
Well, anything bigger than 800x600, the content will center itself. But if you need it to stretch across the browser window, keep the HTML the same, and change your CSS:
#wrapper {
width:100%;
margin:0;
padding:0;
background:url("image.jpg");
}
#header {
width:100%;
margin:0;
}
#sidebar {
position:absolute;
top:150px; (or whatever the height of the #header is)
left:0;
width:200px;
margin:0;
}
#content {
position:absolute;
left:200px;
top:150px;
width:auto;
margin:0;
}
This will make your header width stretch across the page, as well as your content. The sidebar will stay a fixed width. (Hopefully, I'm remembering my HTML code properly - I'm doing it off the top of my head, but if I'm wrong in the calls, I hope you can see what I'm saying!)
HTH!
