CODEWITHSUNDEEP
htmlcss
JDT
JDT

Reputation: 109

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

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.

Upvotes: 3

Views: 18517

Answers (3)

lee_gladding
lee_gladding

Reputation: 1100

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

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

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

Upvotes: 5

Related Questions