My goal is to arrange 3 divs side-by-side, with any additional divs being pushed to the next row. The jsFiddle example I found works perfectly in IE, but in Chrome, only the parent div (box-wrap) is visible. Check out the demo here.
Removing "float:left;" from the #box-wrap-inner div makes all the divs appear, but the 4th div ends up outside the parent container on the far right instead of being displayed below div 1. Take a look at demo 2 here.
In IE, however, the 4th div is correctly positioned below div 1, as shown in the screenshot below. What could be causing Chrome to not render the divs properly when "float:left;" is included?
The key HTML code snippet is:
<div id="box-wrap">
<div id="box-wrap-inner">
<div id="box-1">Box 1</div>
<div id="box-2">Box 2</div>
<div id="box-3">Box 4</div>
<div id="box-3">Box 3</div>
</div>
</div>
and the troublesome CSS code is:
#box-wrap-inner div {
float:left;
margin: 10px;
width: 32%;
height: 200px;
background: #f8f8f8;
border: 1px solid #8ec1da;
text-align: center;
line-height: 50px;
}
Any assistance would be greatly appreciated! Thank you
Functioning correctly in IE