PDA

View Full Version : Best way to space boxes


urbanrays
04-04-2011, 05:53 PM
Hi...Again

I keep meaning to ask this question but never got around to it but here goes, and I know there may be a couple of ways people do this but I may learn something.

Lets say I want to create 3 boxes of content horizontally.



<div class="box"></div>
<div class="box"></div>
<div class="box"></div>



Lets say I put 20px margin on the right this will make the first box sit against the left side of the container edge and the 3rd box 20px away from the right side of the container edge.

You could do this with no margin on the boxes



<div class="box"></div>
<div class="box-splitter"></div>
<div class="box"></div>
<div class="box-splitter"></div>
<div class="box"></div>



And create a splitter that is width: 20px but obviously this would mean a call to dr divititus.

So how do you get the 3 boxes to sit inline with the two outer boxes touching the both sides of container edge and the centre box 20px apart from the outer boxes.

Hope this makes sense and hope you can cure me

DWcourse
04-04-2011, 06:27 PM
<div class="box"></div>
<div class="box"></div>
<div class="rightbox"></div>

or

<div class="box"></div>
<div class="box"></div>
<div class="box rightbox"></div>

In the first case the style .rightbox woud contain everything from .box with right-margin:0

In the second case.rightbox would only contain right-margin:0

place .rightbox after .box in your CSS.

urbanrays
04-04-2011, 06:38 PM
Thanks again DW, do you stay away from using float or would you

box float:left
and
right box float:right

Or do you try and stay away from float on all things you do CSS wise

DWcourse
04-04-2011, 08:07 PM
actually you can float them all to the left. The will line up one after the other as long as there is room.