How do you separate html layout into three columns with divs that can span multiple 1/3 widths?

Question

How would you go about making a three column based html layout with divs where each div can span 1/3, 2/3, or 3/3 of the space plus margins in a way that will work with any combination. (obviously only combinations are 3 1/3width divs, 1 1/3width div and 1 2/3width div, or 1 3/3widths div)

This may be a little confusing to understand so here is a picture to illustrate what I'm trying to achieve:

This is just an example, the divs don't have to be exactly this width, I just want three div types that are 1/3, 2/3, and 3/3 of whatever width is used.

I'm sorry if my question isn't clear.

[Cells (as a LAYOUT, not as a structure) of equal width](http://stackoverflow.com/questions/10525744/css-table-cell-equal-width/10526275#10526275) would do the trick. No margins though, you'll have to use padding or border-spacing or an extra element in each column that'll have a margin (and 100% height) — FelipeAls, Mar 08 '14 at 06:01

Adam Zuckerman · Answer 1 · 2014-03-08T06:48:01.927

You can easily write your own to do this. Your HTML would be something like this:

<div class="one-third">stuff</div>
<div class="one-third">stuff</div>
<div class="one-third">stuff</div>

or

<div class="one-third">stuff</div>
<div class="two-thirds">stuff</div>

or

<div class="three-thirds">stuff</div>

Your CSS would be something like this:

*, *:after, *:before {
    /* This is the part that allows your boxes to stay the size you define */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.one-third {
    float: left;
    width: 33%;
    padding-right: 20px;
}
.two-thirds {
    float: left;
    width: 67%;
    padding-right: 20px;
}
.three-thirds {
    float: left;
    width: 100%;
    padding-right: 0px;
}
.one-third:last-of-type, .two-thirds:last-of-type {
    /* Remove the padding if it is the last on the line */
    padding-right: 0px
}

Here is a working jsfiddle of the above code.

I would recommend looking at Simple Grid as it will save you a lot of time and give you more flexibility.

This is a pretty good solution but I need margins, not padding. Also I would like the margins to fill the rest of the space not a certain px amount. — Sam Sabin, Mar 08 '14 at 15:39

score 0 · Answer 2 · answered Mar 08 '14 at 06:31

You mean something like this http://jsfiddle.net/d97zY/2/ and I correct or did I misinterpret the question wrong.
Html:

<div class="head">Header</div>
<div class="container"><p class="txt">Container</p>
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

Css:

.head{background-color:blue; width:100%; color:white;}
.container{background-color:pink; width: 81%; margin:0 auto;}
.txt{position:absolute; margin-top:20px; color:#fff;}
.one{width: 27%; background-color:red; height:100px; display:inline-block; margin-right:9%; margin-left:5%;}
.two{width: 54%; background-color:yellow; height:100px; display:inline-block;}
.three{width: 81%; background-color:green; height:100px; display:inline-block; margin-left:9.5%;}

I can pretty much achieve this already. I basically need each row of divs to end up aligned no matter the combination. The margins have to be factored in. — Sam Sabin, Mar 08 '14 at 15:47

How do you separate html layout into three columns with divs that can span multiple 1/3 widths?

2 Answers2