Positioning Div horizontally - html

Question

Im trying to position 3 div block horizontally but the 3 block positions itself on a new line.
Also when resizing I would like them not to move.
.left1 {
padding: 9px;
border: 1px solid #e7e7e7;
float: left;
margin-right: 40px;
text-align: center;
}
.left2 {
padding: 9px;
border: 1px solid #e7e7e7;
float: left;
margin-right: 40px;
}
.right1 {
padding: 9px;
border: 1px solid #e7e7e7;
float: left;
margin-right: 40px;
}
Rest of the code
http://jsfiddle.net/EWuR8/

Answer 1

the boxes are too wide for the container. i recreated here using only the 3 blocks and it works fine. just reduce the container width.
http://jsfiddle.net/zy4cN/
.block1,.block2,.block3{
float:left;
padding: 9px;
border: 1px solid #e7e7e7;
float: left;
margin-right: 40px;
}
.nomarg{margin-right:0!important;}

Answer 2

Provide some percentage widths. There is a catch here, in that you have to calculate other things into your widths. For example if you have padding, borders or margin, the width or thickness of those have to be considered as well.
For instance consider the following situation:
You have one containing box which is 200PX wide. You have two smaller boxes that you want to distribute evenly inside that 200 px, which means each of the two smaller boxes should be 100PX wide since 100PX + 100PX = 200PX the situation works fine.
Now let's assume you want a 1PX border around those boxes and a 10PX margin space between them. If you use 100PX for your box width they fail to sit next to each other. Why? If you consider 1PX of border on the left and 1PX of border on the right, of both boxes, thats 4PX of total border width. Then 10PX of margin space. If you use 100PX for the width of the boxes then you have 100+100+4+10 = 214PX Since 214PX is more than 200PX the floats break.
To make the above work, you must adjust the width of your boxes to be 93PX each. Re-calculating it per box... 93PX + 2PX + 5PX = 100PX per box at 2 boxes 100PX * 2 = 200PX.
Conceptual proof aside...
Each of your 3 boxes have an image inside them which is set to 500PX wide. In order to fit all 3 you would need at least 1500PX worth of space not including paddings, margins or borders.
By simply changing the width="500px" to width="100PX" makes them small enough that they stack next to each other fine. See this fiddle: http://jsfiddle.net/EWuR8/2/
Note however that if you shrink the jsfiddle window to be narrow enough, the boxes will break again.