2 columns with a gradient background on the sidebar-100% height?

amandajo

12-06-2006, 05:14 AM

Hi,

I am trying to arrange this 2 column layout and have some problems.
I really don't know what direction to go from here.

I want to get a gradient background on my left sidebar.

But, the sidebar div does not continue to the bottom with the content div, should I just put the gradient background onto the body or the container box?

If so, how can I have the page be at least 100% of the browser (so the background does not run past the footer)? When I do 100% height on the content box it runs past the page (the header and footer are sized by px) and it also messed up by bottom corner images.

Any help anywhere is great.

CODE:
html {
margin:0;
border:0;
padding:0;
height:100%;
}

Body {
margin:0;
border:0;
padding:0;
background:orange;
height:100%;
}

#container {
margin:0;
border:0;
padding:0;
background:brown;
min-height:100%;
height:100%;
}

div.header {
margin:0;
border:0;
padding:0;
width:100%;
Height:35px;
background:red;
}
div.side {
margin:0;
border:0;
padding:0;
width:125px;
background:yellow;
float:left;
}

div.content {
border:0;
padding:0;
margin:0;
width:100%;
background:blue url("shadow.gif");
background-repeat: repeat-y;
}

div.footer {
margin:0;
border:0;
padding:0;
width:100%;
Height:35px;
background:purple;
position:bottom;
clear:both;
}

div.bottomcorner {
padding:0;
margin:0;
border:0;
}
PAGE:
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<link rel="stylesheet" type="text/css" href="default2.css" />
</head>
<body>
<div id="container">
<div class="header"><p>HEADER</p></div>
<div class="side"><p>SIDE</p></div>

<div class="content"><img src="topcorner.gif"><p>CONTENT</p> <p>contenthhhhh hhhhhhhh hhhhhhhhhhhhhh</P><p>content</P><p>content</P><p>content</P>

<div class="bottomcorner"><img src="bottomcorner.gif"></div></div>

<div class="footer"><p>FOOTER</p></div>
</div>
</body>
</html>

Excavator

12-06-2006, 07:46 AM

Hello amandajo,
I worked on this a bit tonight...
-I put the image for the left column on the left side of #outer because outer is the 100% height part.
-I hate absolute positioning but that's what puts the footer at the bottom
-you will have to figure out how to get the rounded corner to goto the bottom, I think it will work if you make it part of the footer. Just add some height to the footer to make room for the corner then give the corner image a left margin to put it in the right place.
-If you want to make this a full page width, I set it at 765px... just delete all the "width:765px;" lines.

See if this page (http://www.nopeople.com/amandajo/) gets you close to what you were looking for.

Excavator

12-06-2006, 08:34 AM

/edit - I went ahead and put that corner img on the bottom here. (http://www.nopeople.com/amandajo/index2.html)

amandajo

12-07-2006, 03:41 AM

Thank you for all your work

The gradient i was using on the side goes up and down, so with your layout I just have to figure out a way to add in the rest of the drop shadow in-between (since I cant tack in on to the page background), but i am sure it can be done

Thanks for all your help!