Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Sidebar goes to bottom of page

    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!

  2. #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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?

  3. Users who have thanked SB65 for this post:

    tylerplack (10-30-2009)

  4. #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Full Files:

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

  5. #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  6. Users who have thanked SB65 for this post:

    phil799 (10-30-2009)

  7. #5
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks!

    Thank you sooooo much!

  8. #6
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    More Help!

    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!


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •