Grow your CSS skills. Land your dream job.

3 colum layout, problem with floats

  • # November 17, 2008 at 4:30 pm

    Hi

    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?

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Code:
    * { 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; }

    .menu{
    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

    # November 17, 2008 at 4:43 pm

    without looking as I am about to go, it can be fixed with overflow:hidden, have a look at your code

    although you may be using margins with your floats, IE adds more, effectively doubling up space.

    but someone will look at your code and let you know for sure anyway.

    ik

    # November 19, 2008 at 6:41 am

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

    # November 19, 2008 at 1:39 pm

    This is what it looks like in FF

    [img]http://www.azezer.se/FF.gif[/img]

    And here IE6
    [img]http://www.azezer.se/IE6.gif[/img]

    The center colum with no float falls down

    # November 19, 2008 at 2:29 pm

    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:
    http://johnsbeharry.com/lab/code/css-tricks/azezer.html

    # November 19, 2008 at 3:00 pm

    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?

    # November 19, 2008 at 6:36 pm

    Yep you can just float everything once direction no problems.

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

    Code:
    .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

    http://www.smashingmagazine.com/2008/11 … ode-clean/

    Happy Coding
    Johns

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".