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

Thread: CSS Help

  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts

    CSS Help

    Alright im just learning CSS. But How can I place things under each other? Like say I want to FIRST put 2 left boxes, then the content, how would i come about doing that? I have only made it far enough to put 1 left box and content, i dont know how to put 2 left boxes, if i put 2 left boxes, it turns out right to the side of it instead of under it. Any help will be appreciated.

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    64
    Thanks
    3
    Thanked 6 Times in 6 Posts
    Hi,

    Sounds like you need to clear the float. Try the code below after your first floating div.

    Code:
    <br style="clear:left" />

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Alright anyone. I did what ^ said, and it worked. But when I put the content bar, it don't go beside the FIRST left nav like i want it to, this is what it does:



    how do i make it on the right of it?

    index.html
    Code:
    <html>
    <head>
    <title>Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
    <div id="container">
    
    <div id="header"> </div>
    
    <div id="leftnavtop"> </div>
    
    <br style="clear:left" />
    
    <div id="leftnavbot"> </div>
    
    <div id="content"> </div>
    
    </div>
    
    </body>
    </html>
    style.css
    Code:
    body {
    background-color: #383838;
    font-family: Comic Sans;
    }
    
    #container {
    width: 700px;
    padding: 1px;
    margin:43px auto 0;
    }
    
    #header {
    width: 700px;
    height: 100px;
    background-image:url(images/2.jpg);
    }
    
    #leftnavtop {
    width: 160px;
    height: 170px;
    background-image:url(images/1.jpg);
    float: left;
    }
    
    #leftnavbot {
    width: 160px;
    height: 170px;
    background-image:url(images/1.jpg);
    float: left;
    }
    
    #content {
    width: 500px;
    height: 350px;
    background-image:url(images/3.jpg);
    }

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Have you even tried doing things by trial and error? Try something and if it doesn't work then try something else. It is a good way to learn.


  •  

    Posting Permissions

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