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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Content underneath

    Alright, i'm just learning CSS, and i'm making a website. So I ran into a problem. I'm trying to place my content bar to the right of the left nav bar, but it goes under it, then im gonna put a right nav bar. Here is the problem:



    Heres the codes:

    index.html
    Code:
    <html>
    <head>
    <title>Conquer Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <div id="container">
    
    <div id="header"> </div>
    
    <br />
    
    <div id="leftbar"> </div>
    
    <div id="content"> </div>
    
    </div>
    
    </body>
    </html>
    style.css
    Code:
    body {
    background-color: #565656;
    font-family: Arial;
    }
    
    #container { 
    width: 600px;
    padding: 1px;
    margin: 43px auto 0;
    }
    
    #header {
    width: 600;
    height: 100;
    background-image:url(images/header.jpg);
    }
    
    #leftbar {
    width: 150;
    height: 20;
    background-image:url(images/bar.jpg);
    }
    
    #content {
    width: 275;
    height: 20;
    background-image:url(images/content.jpg);
    }

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Add float: left to #leftbar and #content.

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Decker,

    here is your corrected code...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>corected code</title>
    
    <style type="text/css">
    body {
        background-color:#565656;
        font-family:arial,sans-serif;
        font-size:100%;
     }
    #container { 
        width:600px;
        padding:1px;
        margin:43px auto 0;
     }
    #header {
        height:100px;
        margin-bottom:19px;
        background-image:url(images/header.jpg);
     }
    #leftbar {
        float:left;
        width:150px;
        height:20px;
        background-image:url(images/bar.jpg);
     }
    #content {
        float:left;
        width:275px;
        height:20px;
        background-image:url(images/content.jpg);
     }
    #rightbar {
        float:left;
        width:175px;
        height:20px;
        background-image:url(images/bar.jpg);
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header"></div>
    
    <div id="leftbar"></div>
    
    <div id="content"></div>
    
    <div id="rightbar"></div>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    
    Notes:-

    1. Always use a full DOCTYPE.

    2. Always use a content-type meta tag.

    3. Values in CSS must be always be specified except for zero;

    coothead

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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