Question

I am trying to layout 12 divs within another div. It seems that the margin-left is not working for them. They appear in a vertical column rather beside eachother.

div id="wrapper">
<div id="mydiv">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

CSS

wrapper{
width:952px;
height:602px;
margin: 0px auto;
position:relative;
}
#mydiv{
position:absolute;
left:150px;
width:600px;
height:375px;
border: 1px solid black;
padding:10px;
color:#FF0080;
background-color:#FF0000;

}
#mydiv div{
width:180px;
height:100px;
background-color:#000000;
margin-left:20px;
margin-top:10px;
}

Answer 1

You need to float the divs if you want them to appear side-by-side:

Fix: specified class instead of style for inline styling.

<div style="float:left;margin-left:10px;">
    Hello
</div>
<div style="float:left;margin-left:10px;">
    World!
</div>

Here’s a jsFiddle to demonstrate.