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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stupid CSS question

    Hey guys, this is a really stupid question that I can't seem to figure out
    I have a <div> for my header, <div> for my navigation, and a <div> for my main content. My header and navigation is fine, but when I try to fit my main content next to my navigation, it messes up and goes below, to the right of the navigation, when it should be pushed up.\

    Note: I know I don't have a doctype and the HTML isn't valid, this is just a basic layout I did on my computer, not on the web.

    Here is my HTML:
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Header</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
    <div id="header">
    Header
    </div>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="spanish1.htm" id="current">Home</a></li>
    <li><a href="#">Spanish 1</a></li>
    <li><a href="#">Spanish 2</a></li>
    <li><a href="#">Health</a></li>
    
    </ul>
    </div>
    <div id="main">
    Main body
    </div>
    
    </body>
    
    </html>
    And the CSS:
    Code:
    #main
    {
    width: 80%;
    height: 85%;
    float: right;
    padding-top: left;
    }
    #header
    {
    text-align: center;
    border-style: groove;
    width: 100%;
    height: 15%
    }
    #navcontainer 
    { 
    width: 20%;
    height: 85%;
    border-style: groove;
    background-color: #036;
    }
    
    #navcontainer ul
    {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    #navcontainer a
    {
    display: block;
    padding: 3px;
    width: 180px;
    background-color: #036;
    border-bottom: 1px solid #eee;
    }
    
    #navcontainer a:link, #navlist a:visited
    {
    color: #EEE;
    text-decoration: none;
    }
    
    #navcontainer a:hover
    {
    background-color: #369;
    color: #fff;
    }
    And I attached a picture to show what it's doing.

    Edit: Says the image is invalid..

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    your #main is floted. Move it above the #nav in the HTML.

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh that works! All I had to do is put the #main above the nav and float the nav, stupid me!

    Thanks a lot Harbringer!


  •  

    Posting Permissions

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