PDA

View Full Version : Sidebar goes to bottom of page



phil799
10-30-2009, 09: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

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, 09: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, 09:31 PM
My full files are here:
http://drop.io/n1x8ibm
Password: thisissecret

SB65
10-30-2009, 09: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, 09:50 PM
Thank you sooooo much!

phil799
10-30-2009, 09: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!