DIV float:left with another div with display: inline-block wraps - html

Question

I have the following code;
<div id="first" style="float: left">
</div>
<div id="second">
<div id="1" style="display: inline-block;">
</div>
<div id="2" style="display: inline-block;">
</div>
......
<div id= "n" style="display: inline-block;">
</div>
</div>
The problem is that when the content in #second is taller than the content in #first,
then the child div's in #second start a new line below #first.
I want them to come below the second div only.

Answer 1

One simple way of doing this without having to set any widths or margins is to trigger a block formatting context for #second.
Apply the following CSS:
#second {
border: 1px solid blue;
overflow: auto;
}
See the demo at jsfiddle
For more information about block formatting contexts, see:
http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

if you are aware of the maximum width/width of the first div then just apply that width value as margin-left to the second div.
Working Fiddle
Updated: (if you are not aware of the width)
#second{
display: table-cell;
}
Fiddle

Answer 3

Use inline-block instead of float.
try:
#first, #second{
display: inline-block;
vertical-align: top;
}
That will make sure the two are separate as long as they are next to each other, so have to have a width.
EXAMPLE FIDDLE
EDIT
or yes, if you don't know width
#first, #second{
display: table-cell;
}
EXAMPLE FIDDLE 2