Innovative Method #1 - Modern CSS3 calc()
By utilizing CSS3's calc() length, you can achieve this by specifying the width of the .element as follows:
.element {
width: 49%; /* not ideal for older browsers */
width: calc(50% - 8px); /* recommended solution for IE9+, FF16+ */
width: -moz-calc(50% - 8px); /* compatibility for FF4 - FF15 */
width: -webkit-calc(50% - 8px); /* browser support for Chrome19+ and Safari6+ */
}
Visit http://caniuse.com/calc for information on which browsers and versions offer support for this feature.
Innovative Method #2 - Traditional Wrapping
An alternate approach is to stack multiple elements together, wrapping each 'element' within a container that has a width of 50% and a padding of 4px:
<div class='wrap'>
<div class='ele1'>
<div class='element'>HELLO</div>
</div><div class="ele1">
<div class='element'>WORLD</div>
</div>
</div>
.ele1 {
display:inline-block;
width:50%;
padding:4px;
box-sizing:border-box; /* Ensure that 50% includes the padding */
-moz-box-sizing:border-box; /* For Firefox */
-webkit-box-sizing:border-box; /* For legacy mobile Safari */
}
.element {
background:#009; color:#cef; text-align:center;
display:block;
}
Innovative Method #3 - Leveraging (CSS) Tables
A similar outcome can be achieved by treating the wrapper as a 'table' and each element as a cell in the same row. In this way, spacing between elements becomes insignificant:
<div class='wrap'>
<div class='element'>HELLO</div>
<div class='element'>WORLD</div>
</div>
.wrap {
background:red;
width:300px;
display:table;
border-spacing:4px
}
.element {
background:#009; color:#cef; text-align:center;
width:50%;
display:table-cell;
}
It should be noted that this final method eliminates the 4px gap between the two elements, whereas the initial two methods result in an 8px space between items and a 4px margin at the edges.