Forums

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
    Posts
  • November 17, 2008 at 4:30 pm #23593
    Azezer
    Participant

    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:


    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 19, 2008 at 6:41 am #51251
    Jonz
    Member

    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 #51268
    Azezer
    Participant

    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 #51270
    Jonz
    Member

    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 #51274
    Azezer
    Participant

    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 #51283
    Jonz
    Member

    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

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