The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 3 colum layout, problem with floats

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #23593


    Im trying to make a 3 colum layout, with 2 float colums and one fixed and adjusted with margins.

    Looks fine in FF but in IE6 the fixed one appears below the floats.

    What have i missed?

    * { margin: 0; padding: 0; }

    body { background: #252525; }

    #wrap { width: 1024px; height: 650px; background: red; margin: auto;}

    #header { width: 1024px; height: 200px; background: url(img/header.png);}

    #headerspace { width: 1024px; height: 10px; background: #0092cb; }

    #content { width: 378px; height: 365px; background: #252525; margin-left: 400px; margin-right: 246px;}

    #leftbar { width: 400px; height: 400px; background: #252525; float: left; margin: 0 auto;}

    #rightbar { width: 246px; height: 400px; background: #252525; float: right; margin: 0;}

    #footer { margin: auto; width: 1016px; height: 220px; background: #252525; padding: 0 0 0 100px; }

    .opaque1 { opacity: 1.0; filter:alpha(opacity=100) }

    .right { float: right;}

    #content h1 { font-family: Arial, Helvetica,
    sans-serif;font-size: 14pt;
    line-height: 13pt;
    color: #fff; }

    #content h2 { font-family: Arial, Helvetica,
    sans-serif;font-size: 12pt;
    line-height: 13pt;
    color: #fff; }

    #content h3 { font-family: Arial, Helvetica,
    sans-serif;font-size: 10pt;
    line-height: 13pt;
    color: #fff; }

    width: 1016px;
    background-color: #252525; }

    .menu ul{
    margin: 0; padding: 0;
    float: left;}

    .menu ul li{
    display: inline; margin: 10px;}

    .menu ul li a{
    float: left; text-decoration: none;
    color: white; padding: 10px; margin: 10px;
    width: 180px; height: 180px;
    background: url(img/bgfooterul.gif) no-repeat;}

    .menu ul li a:visited{
    color: white; margin: 10px;}

    .menu ul li a:hover, .menu ul li .current{
    color: #fff;
    background-color:#0b75b2; margin: 10px; border: 1px #fff solid;}

    .clearfix:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;

    .clearfix {display: inline-block;} /* for IE/Mac */

    // Azezer


    Can you illustrate it or something for me casue I can’t really understand what you trying to achieve. Sorry :oops:


    This is what it looks like in FF


    And here IE6

    The center colum with no float falls down


    May I ask why you decided to not float the middle div just like the others?

    Anyway thats what I did, also your code was very messy imo that’s why I couldn’t understand what was goin on the first time around. It also isnt very semantically correct. You had the middle div (content) after the div that you wanted to display last in the html.

    Remove the margins on the divs and just float them (it does the same thing you were attempting to do with the margins and padding)

    Tell me if I translated what you wanted horribly wrong or if it helped you :)

    View the source here to see what I did:


    Thanks gonna try it…

    I used to make webpages years and years ago, trying to learn the new stuff =)

    Then i can float all 3 to the left?

    or is there a way to center a float?


    Yep you can just float everything once direction no problems.

    Easiest way to do so would be to have a class of

    .floatLeft {
    float: left;

    Then leave out the float attribute from the ID or class for the actual column, and then in your html you do the div markup like this:

    <div id="columnOne" class="floatLeft"> or
    <div class="columnOne floatLeft"> – if your column was a class

    Here is a great post by Chris which would do you good … ode-clean/

    Happy Coding

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.