Question

To space things equally in CSS is relatively simple. There are also many questions on stack overflow pertaining to it, but one thing it does not explain is how to put spaces (or margin-left & margin-right) between each box.

To illustrate, this is what I would like to accomplish:

I feel like I’m taking a long route by using three differently named divs to make this happen:

CSS:

#moreinfobar
{

}
#moreinfobarbox
{
float:left;
width:33.33%;
}
#moreinfobarbox-info
{
margin:0 20px;
background-color:#ffffff;
-webkit-box-shadow:  0px 0px 5px 1px #000000;
box-shadow:  0px 0px 5px 1px #000000;
}

HTML:

<div id="moreinfobar">

                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test1</div></div>
                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test2</div></div>
                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test3</div></div>


            </div>

I tried to get it work with two separately name divs to no avail. Is it possible to condense my code?

JSFIDDLE:

Three divs (WORKS):

http://jsfiddle.net/JsA25/

Two divs (BROKEN):

http://jsfiddle.net/TxT4T/1/

Answer 1

The best way I feel is to just set the margin to 5%. Here’s the jsfiddle: http://jsfiddle.net/dwbed/