3 div boxes in a row

  • I’m trying to add three boxes next to each other, each one at a third of the page width. I’ve tried doing this but keep seeing problems (right box below others, extra box somehow in right nav, left colum now moves when viewing a post in I.E). Could anyone suggest what i’m doing wrong?

    My site is wahow .org and I have the css setup as follows:

    #container {
    margin: 2px auto;
    text-align: left;
    width: 100%;
    height: 130px;
    border: 2px dotted #777744;
    }
    #leftbar {
    float: left;
    width: 33%;
    height: 65px;
    margin-left: 2px !important;
    margin-left: 1px;
    padding: 2px;
    background: #f4f4f0;
    border: 1px solid #777744;
    }
    #centralbar {
    float: left;
    width: 33%;
    height: 65px;
    margin: 0 2px;
    padding: 2px;
    border: 1px solid #777744;
    }
    #rightbar {
    float: left;
    width: 33%;
    height: 65px;
    padding: 2px;
    background: #f4f4f0;
    border: 1px solid #777744;
    }

    Thanks for any help, I appreciate it.

Viewing 4 replies - 1 through 4 (of 4 total)

  • 3×33%=99%, add 18px (2px padding on each side of each div, plus 1px border on each side of each div), then add margins on one div… you reach over 100% width, which means your boxes will flow down.

    18px, you’d need a page width of 1800px for the layout to work.

    Thread Starter broomy

    (@broomy)

    How would I change this so that it is compliant with all browsers as I’d copied this exactly from a working example, apart from changing the widths to percentages rather px?

    Would I also change the padding and spacing to percentages?

    Thanks again

    hehehehe, well, changing from px to % is not a “small” change, particularly when you start mixing % and px in the end result.

    Changing padding and spacing to percentage might work, but that also gets tricky.

    If you’re thinking about mixing px and %, you have to determine the monitor size the majority of your user have, and add up your padding, borders, margins, etc. Then figure out how much of that is in terms of percentage in relation to the monitor resolution, then you know how much percentage you have to spread over your three columns.

    For example, say 85% of your visitors are on 1024×768. Remove a few px for scrollbars, etc. So you’re playing with 1000 px. you have 18px, which is a hair under 2%. So, you have 98% of width available to play with.

    But then, that means your site would still break on monitors using 800×600. Or people resizing their windows.

    As to make it work across browsers… read up on box model and box model hacks, and how IE handles padding/margins differently.

    Hve fun

    Thread Starter broomy

    (@broomy)

    Thanks vavroom, i’ll get reading!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘3 div boxes in a row’ is closed to new replies.

Tags