side by side divs in full width

Question

I have problems to place N divs side by side with full browser width

I want like this. when you resize browser space between divs must stay same and divs must resize in width.

|div| |div| |div|

|  div  | |  div  | |  div  |

Answer 1

One solution would be to use percentages:

div.mydiv {
    width: 33%;
    display: inline-block;
}

If you do this, be careful with padding: that adds to a div 's width, possibly causing overflow. This can be fixed if you support only IE >=8, by doing

div.mydiv {
    width: 33%;
    display: inline-block;
    -moz-box-sizing: border-box; /* OMG why doesn't Firefox support this yet */
    -webkit-box-sizing: border-box; /* Safari below 5.1, including 5 */
    box-sizing: border-box;
}

And if you do that, there's even one more possible problem: space between the div s. This occurs because you have empty text nodes in between them, and display: inline-block thinks that's OK: elements laid out in an inline -type fashion can be interspersed with blank text nodes. To fix this, there's a pretty bad hack:

div.containerOfAllTheDivs {
    font-size: 0;
}
div.mydiv {
    font-size: 12px; /* or whatever */
    /* plus the above stuff */
}

This makes it so that any text (eg whitespace) that appears inside the container is zero-sized, unless it appears inside the divs you are stacking next to each other, in which case it reverts back to 12px . As I said, a pretty bad hack. But it works.

---

The more general solution is the new flexbox proposal , but that is still under heavy revision: there are two outdated versions implemented in various browsers, with the latest one not being implemented in any as of today (2012-05-15). If you know your exact environment, though, this might be a good solution.

Answer 2

For two divs, just do ( Demo ):

div
{
    width: 49%;
    float: left;
}

For three, do ( Demo ):

div
{
    width: 33%;
    float: left;
}

Answer 3

If you need an arbitrary number of divs, you have two options:

1. If the number is determined by the server (value is coming from a database or a session or whatever), you can generate appropriate CSS on the server side . This solution is preferable.
2. If not, you need JavaScript to calculate the viewport's width, and assign width values accordingly to your divs.

Answer 4

The same thing could be achieved using CSS3 Flexible Box Style Layout with very less coding. Well it depends upon the browser you are planning to support.

Now Flexible box layout is supported only in webkit engines & mozilla

Answer 5

Putting this as an answer because I guess it's valid and may serve you well. 960.gs and bootstrap both provide scaffolding for layouts identical to what you want. 960.gs is just layout but if bootstrap suits you, you can customize it on their site to just get the bits that deal with layout. One caveat for bootstrap, I haven't found a way to remove the left margin on the div columns. 960.gs includes alpha and omega classes that set margin-left and margin-right to 0 respectivley. I had to add these to bootstrap when I used it.

Using one of those scaffoldings will save you a lot of time and effort. If you have to hand your code off to somebody else later or even just have somebody else working on it with you, using a scaffolding will help them work with your code too.