Sidebar goes to bottom of page

phil799 · 10-30-2009, 08:21 PM

I am creating a site with a sidebar and it should be next to the content however, it goes next to the footer. My CSS

Code:

body {
width:750px;
margin:0 auto;
margin-top:30px;
background-color:#FFF;
}



/* ----- HEADER ----- */

#header {
width:540px;
height:150px;
background-color:#333333;
background-image:url(header.gif);
margin-left:10px;
float:right;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
}

#header h1 {
font-family: Trebuchet, Trebuchet MS;
font-size:42px;
color:#FFF;
margin-top:65px;
margin-left:75px;
}

#headersearch {
	margin-top:-20px;
	margin-left: 20px;
	text-align:left;
}

/* FAUX LAYOUT WRAPPER */


/* 
This div is optional: When you delete it the navigation bar and the content block won't have the same size when one of them has a larger height then the other. I recommend you to leave this faux layout wrapper here.

IMPORTANT: In order to make this work you have to download http://csseasy.com/layouts/fixed/background_3.gif (copy past in your address bar) and place it in the same folder as this html file. DON'T HOTLINK to this file.
*/

#wrapper{
width:750px;
background:url(background_3.gif) repeat-y; /* WARNING: IF YOU CHANGE THE COLORS OF THE LAYOUT YOU HAVE TO CHANGE THIS IMAGE! */
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:10px;
}


/* ----- NAVIGATION ----- */


#nav {
width:200px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background-color:#d2d2d2;
background-image:url(sidebar.gif);
background-repeat:no-repeat;
float:left;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;

}


#nav h2 {
	font:Gill Sans, sans-serif;
	font-size:16px;
	padding-left:20px;
	padding-top:10px;
	padding-bottom:5px;
	color:#333;
}

#nav p {
	font:Arial;
	font-size:12px;
	padding-left:15px;
}

.image {
	padding-top: 25px;
	padding-left:30px;
}
/* ----- MAIN CONTENT ----- */

#line {
	border-top: 1px solid #b3d4f0;
	height:10px;
	width:540px;
	margin-left:210px;
	margin-top:160px;
}

#content { 
margin-left:210px;
width:540px;
min-height:500px;
height:auto;
height:500px; /* for IE5.x and IE6 */
margin-top:5px;
background-image:url(content.gif);
border-bottom:1px #d2d2d2 solid;
}

.stats {
	margin-left:5px;
	padding-top:5px;
	font-family:Sans, Sans-serif;
	font-size:10px;
}

#content h2 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:20px;
	color:#222;
	margin-left:75px;
}

#content p {
	font-family: Verdana;
	background-color: #fff;
	color: #444;
	text-decoration: none;
	word-spacing: 0.15em;
	text-align: left;
	letter-spacing: 0;
	line-height: 1.2em;
	font-size:12px;
}

/* ----- FOOTER ----- */



#footer { 
margin-top:10px;
width:750px;
height:100px;
background-image:url(footer.gif);
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
margin-bottom:75px;
}

#footer p {
	padding-top:50px;
	margin-left:75px;
	margin-right:75px;
	margin-bottom:50px;
	font-family:Trebuchet MS, Trebuchet;
	font-size:10px;
}

#footer a {
	font-color:#89B0CD;
}

Please help me to identify and fix the problem. I have a 6PM deadline!

SB65 · 10-30-2009, 08:24 PM

We're going to need a bit more than that I think - I can't even see a sidebar in that - is it #nav? Can you provide a link to your page?

Or your full html as well as your css?

phil799 · 10-30-2009, 08:31 PM

My full files are here:
http://drop.io/n1x8ibm
Password: thisissecret

SB65 · 10-30-2009, 08:44 PM

I can't see the rendered html there, which is what we'd really need, but from index.php it looks like you've got the sidebar after the content in your html.

#content isn't floated, so whatever comes after it isn't going to be alongside.

If I've guessed right, your sidebar - assuming that is #nav - needs to be above #content in your html.

phil799 · 10-30-2009, 08:50 PM

Thank you sooooo much!

phil799 · 10-30-2009, 08:53 PM

I have another problem, now the disance between the sidebar and the header is way more than it should be! But the distance between the sidebar and the content is fine!