...

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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum