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
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 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?

  • Users who have thanked SB65 for this post:

    tylerplack (10-30-2009)

  • #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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 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.

  • Users who have thanked SB65 for this post:

    phil799 (10-30-2009)

  • #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!

  • #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
    •