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: Float

  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Float

    Hey, i'm using this css:

    Code:
    #top {
    background: url('images/content-top.gif');
    background-repeat: no-repeat;
    position: relative;
    left: 0%;
    top: 0%;
    z-index: -1;
    float: left;
    width: 481px;
    height: 22px;
    }
    
    #mid  {
    background: url('images/content-middle.gif');
    background-repeat: repeat-y;
    padding: 60px;
    float: left;
    width: 481px;
    margin: 0px;
    }
    
    #bot {
    background: url('images/content-bottom.gif');
    background-repeat: no-repeat;
    float: left;
    height: 23px;
    width: 481px;
    margin: 0px;
    }
    
    .home {
    background: url('images/nav-home.gif');
    z-index: 1;
    float: right;
    width: 129px;
    height: 39px;
    }
    
    .radio {
    
    }
    
    .extra {
    
    }
    
    .about {
    
    }
    However when the "home" image floats right, it leaves a massive gap:



    How can I stop this?

    Thanks

    ~ David
    Last edited by Vernier; 05-25-2012 at 10:37 PM.

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ok try this:

    You might want to try floating all of your div to the left. This puts div side by side.
    A simple way to do this is add a class with the name "col" to all of "top","mid", "bot",and "home".

    Then add this to your CSS
    Code:
    .col{
       float:left;
    }
    If it doesn't work just post back, and I'll think up a new solution
    Last edited by chrisf; 05-25-2012 at 09:54 PM.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by chrisf View Post
    Ok try this:

    You might want to try floating all of your div to the left. This puts div side by side.
    A simple way to do this is add a class with the name "col" to all of "top","mid", "bot",and "home".

    Then add this to your CSS
    Code:
    .col{
       float:left;
    }
    If it doesn't work just post back, and I'll think up a new solution
    Thanks for the help!

    Unfortunatly, it's still the same.

    My new code is:

    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <LINK href="style.css" rel="stylesheet" type="text/css">
    <title>Maintenance!</title>
    </head>
    
    <html>
    <body>
    
    
    <div id="container">
    
    <div id="banner"></div>
    <div id="top">
    <div class="col"></div>
    </div> 
    
    
    
    <div id="navigation"> 
    <div id="home">
    <div class="col"></div>
    </div>
    
    <div id="radio"></div>
    
    <div id="extra"></div>
    
    <div id="about"></div>
    </div>
    
    
    
    <div id="mid"><div class="col"></div></div>
    <div id="bot"><div class="col"></div></div>
    
    </div>
    </body>
    </html>
    and

    Code:
    /*
    * This layout was designed and coded by Vernier from HabFab.com                 *
    * This layout must not be resold or redistributed                               *
    * You may edit this layout, but you must not redistribute it                    *
    * You must not remove the copyright notice, otherwise legal action may be taken *
    */
    
    body  {
    background: url('images/background.png');
    background-repeat: repeat;
    text-align: center;
    font: verdana;
    }
    
    #container {
    margin: 0 auto;
    width: 619px;
    }
    
    #banner {
    background: url('images/banner.gif');
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
    }
    
    #top {
    background: url('images/content-top.gif');
    background-repeat: no-repeat;
    position: relative;
    left: 0%;
    top: 0%;
    z-index: -1;
    float: left;
    width: 481px;
    height: 22px;
    }
    
    #mid  {
    background: url('images/content-middle.gif');
    background-repeat: repeat-y;
    padding: 60px;
    float: left;
    width: 481px;
    margin: 0px;
    }
    
    #bot {
    background: url('images/content-bottom.gif');
    background-repeat: no-repeat;
    float: left;
    height: 23px;
    width: 481px;
    margin: 0px;
    }
    
    #home {
    background: url('images/nav-home.gif');
    z-index: 1;
    float: right;
    width: 129px;
    height: 39px;
    }
    
    #radio {
    
    }
    
    #extra {
    
    }
    
    #about {
    
    }
    
    .col{
       float:left;
    }
    cheers

    ~ David

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorted. Sorry and thanks for the help mate!

    ~ David


  •  

    Posting Permissions

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