Question

I’m having a problem with the way I design triple-column layouts on a 960 wide canvas.

This is a diagram of what I’m attempting:

I have a DIV element which is 960 wide. It has a 20px padding around the outsides and I need 3 equal columns inside of it.

Can somebody help me with the three columns, so each box and the margins in between are equal? 2 and 4 columns is simple but dividing by 3 doesn’t add up equally with the 20px padding in the containing element. When using 2 and 4 columns I use FLOAT:LEFT and an extra element with CLEAR.

<style>
.960_element { width:960px; padding:20px; }
.960_element .left {  }
.960_element .middle {  }
.960_element .right {  }
</style>

<div class="960_element">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

Answer 1

1st of all your .960_element class name is wrong, you cannot define a class name starting with a number

Demo

HTML

<div class="element">     
    <div class="left">h</div>     
    <div class="middle">h</div>     
    <div class="right">h</div>
</div>

CSS

.element { width:960px; padding:20px;background-color: #dddddd;margin: 40px;/*margin not required*/}
.element div {background-color: #ff0000;}
.left { height: 200px; width: 32%; display: inline-block;}
.middle { height: 200px; width: 32%; margin-left: 14px;  display: inline-block; }
.right { height: 200px; width: 32%; margin-left: 14px;  display: inline-block; }