Arranging spacing evenly in CSS is a relatively straightforward process. Despite the abundance of stack overflow questions on the subject, one aspect that remains unclear is how to add spaces (or margin-left & margin-right) between each box.
For clarity, here is what I aim to achieve:
It seems like I am using a circuitous method by employing three divs with different names to accomplish this:
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>
My attempts to achieve this with two separately named divs have been unsuccessful. Is there a way to simplify my code?
JSFIDDLE:
Three divs (WORKS):
Two divs (BROKEN):