Three equal-width columns with margin

Question

I'm trying to create a layout where I have three equal-wdith columns (33% width each). However, I want a 15px margin on either side of the middle column.

Please see this jsbin example I've created: http://jsbin.com/usiduy/edit
How can I get the blue column to sit on the right?

Answer 1

Try this css:

body { margin: 0; padding: 0}

#container {
    position: absolute;
    top: 30px; left: 50px;
    bottom: 30px; right: 50px;
    border: 1px solid #ccc
}

#container > div {
    width: 33%;
    height: 100%;
    float: left;
}
#container div div {
    height:100%;
}
#container div div.a {
    background: red;
}
#container div div.b {
    background: green; margin:0 15px;
}
#container div div.c {
    background: blue;
}

using this HTML:

<div id="container">
        <div><div class="a">First</div></div>
        <div><div class="b">Second</div></div>
        <div><div class="c">Third</div></div>
    </div>

Answer 2

You can do like this:

CSS:

  .item.first { background: red;width: 33%;float:left; margin-right:15px}
  .item.middle { background: green; overflow:hidden;}
  .item.last { background: blue;width: 33%;float:right;margin-left:15px}

HTML:

<div id="container">
    <div class="item first"></div>
        <div class="item last"></div>
    <div class="item middle"></div>

</div>

Check live example

http://jsbin.com/usiduy/4/edit#html

Updated:

http://jsbin.com/usiduy/6/edit#html