How To Have Multiple Divs On One Line With Even Spacing - html

Question

Trying to get multiple divs on the same line with even spacing. So they nicely fit the whole container.
Here is what i have got so far. Tried to set margin right and left equal to the same on all the boxes, but it is still tricky to make it even and sometimes the final box will go on a new line.
HTML
<div id="serviceBox">
<div class="serviceBox1">
<h2> Heading 1</h2>
<p>Information</p>
</div>
<div class="serviceBox2">
<h2>Heading 2</h2>
<p> Information</p>
</div>
<div class="serviceBox3">
<h2>Heading 3</h2>
<p>Information</p>
</div>
<div class="serviceBox4">
<h2>Heading 4</h2>
<p>Information</p>
</div>
</div>
CSS
#serviceBox
{
width:100%;
margin: 0 auto;
margin-top:75px;
height:250px;
border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
float:left;
width:20%;
height: 250px;
background-color: white;
border: 1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
}
https://jsfiddle.net/ruJ2R/3/

Answer 1

I would suggest adding a new element inside each serviceBox, in this example the div with class box
CSS:
#serviceBox
{
width:100%;
margin: 0 auto;
margin-top:75px;
height:250px;
border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
float:left;
width:25%;
}
.box{
height: 250px;
background-color: white;
border:1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
}
HTML
<div id="serviceBox">
<div class="serviceBox1">
<div class="box">
<h2> Heading 1</h2>
<p>Information</p>
</div>
</div>
<div class="serviceBox2">
<div class="box">
<h2>Heading 2</h2>
<p> Information</p>
</div>
</div>
<div class="serviceBox3">
<div class="box">
<h2>Heading 3</h2>
<p>Information</p>
</div>
</div>
<div class="serviceBox4">
<div class="box">
<h2>Heading 4</h2>
<p>Information</p>
</div>
</div>
</div>
This way the service boxes are nicely a quarter of the container and inside service box you can add the border and shading to the new box element

Answer 2

UPDATE: because of the borders , either apply box-sizing:border-box to your style, or put your div with borders inside one more div.
There are at least 4 different ways of doing it.
using float layout
using display:table-cell
using display:inline-block
using absolute positioning
.serviceBox {
box-sizing:border-box;
margin-right:4%;
float:left;
width:20%;
height: 250px;
background-color: white;
border: 1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
}
.serviceBox:first { margin-left:4%; }
see updated fiddle

Answer 3

Your problem is that the boxes have a border, so giving them width and margin in percentages that sum to 100% don't work: each box has an extra 2 pixels from the border, pushing the last one off the row. But you can solve this problem by giving them negative margins to compensate for the border:
width:25%;
margins:0 -1px;

Answer 4

try this,
.serviceBox {
margin-left:4%;
float:left;
width:20%;
height: 250px;
background-color: white;
border: 1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
}