Float problems

Discussion in 'CSS' started by eksplayer, Nov 14, 2006.

0
  1. #1
    How do I center and then float the two divs 'left' and 'right' to left and right and still keep the red color in the div midt?


    *********************
    ******** HTML ********
    *********************

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>CSS layout</title>
    </head>
    <body>
    <div id="top">
    <div id="bar1">
    Bar 1
    </div>
    <div id="bar2">
    Bar 2
    </div>
    </div>

    <div id="midt">
    <div id="bar3">
    Bar 3
    </div>
    <div id="left">
    Indhold 1 - venstre
    </div>
    <div id="right">
    Indhold 2 - højre
    </div>
    </div>

    <div id="bund">
    <div id="bottom">
    Bar 4
    </div>
    </div>
    </body>
    </html>


    *********************
    ******** CSS *********
    *********************


    body {
    margin: 0;
    padding: 0;
    }

    #top {
    margin:0;
    padding:0;
    width:100%;
    background-color: #000099;
    }

    #bar1 {
    margin: 0 auto;
    width: 750px;
    background-color: #FF3366;
    }

    #bar2{
    margin: 0 auto;
    width: 750px;
    background-color: #33CC33;
    }

    #midt {
    margin:0;
    padding:0;
    width:100%;
    background-color: #FF0000;
    }

    #bar3 {
    margin: 0 auto;
    width: 750px;
    background-color: #333333;
    }

    #left {
    margin: 0 auto;
    width: 450px;
    background-color: #CCFF33;
    }

    #right {
    margin: 0 auto;
    width: 300px;
    background-color: #0000FF;
    }

    #bund {
    clear:both;
    margin:0;
    padding:0;
    width:100%;
    background-color:#000099;
    }

    #bottom {
    margin: 0 auto;
    width: 750px;
    background-color: #9933CC;
    }
     
    eksplayer, Nov 14, 2006 IP
  2. eksplayer

    eksplayer Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    [​IMG]
     
    eksplayer, Nov 14, 2006 IP
  3. jared

    jared Peon

    Messages:
    231
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The easiest thing to do would be to create a container DIV.

    
#container {
margin: 0 auto;
width: 750px;
}

#left {
float: left;
width: 450px;
background-color: #CCFF33;
}

#right {
float: right;
width: 300px;
background-color: #0000FF;
}
    Code (markup):
    Then you would just structure it like

    
<div id="container">
   <div id="left">left column</div>
   <div id="right">right column</div>
</div>
[I]<div style="clear:both"></div>[/I]
    Code (markup):
    I haven't tested it but that should work. Just don't forget to clear your floats or that can mess things up down the road. See if that does it for you.

    Cheers :D
     
    jared, Nov 14, 2006 IP
  4. eksplayer

    eksplayer Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi Jared,

    Thanks, it works perfect, you just saved my day :)

    Can you explain this line: <div style="clear:both"></div> ...and why we don't define that in the CSS?

    Thanks again!
     
    eksplayer, Nov 15, 2006 IP
  5. jared

    jared Peon

    Messages:
    231
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    http://css.maxdesign.com.au/floatutorial/clear.htm

    If you don't clear you floats, things can start to get weird... things might not wrap around the DIVS properly. It is kind of hard to explain.

    Alternately you could do this:

    
.clearfloat {
  clear:both;
}
    Code (markup):
    
<div id="container">
   <div id="left">left column</div>
   <div id="right">right column</div>
</div>
<div class="clearfloat"></div>
    Code (markup):
    cheers
     
    jared, Nov 15, 2006 IP
  6. eksplayer

    eksplayer Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks, I found it very usefull :)
     
    eksplayer, Nov 16, 2006 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Or better yet, put the clear property on the element that comes after the main DIV container and save yourself the unnecessary markup.
     
    Dan Schulz, Nov 17, 2006 IP
  8. sabian1982

    sabian1982 Notable Member

    Messages:
    2,028
    Likes Received:
    161
    Best Answers:
    0
    Trophy Points:
    210
    #8
    Clearing the floats is always good practice. Say the container div had a background colour... well if you dont clear the divs that you are floating left and right, the background colour of your container is likely to completely disappear - its a problem i came against a while ago, took me a while to find out how to resolve the issue!
     
    sabian1982, Nov 17, 2006 IP