CSS relative positioning not breaking line

Question

i want to have a relative positioning of some divs, having an outer container and floating in one line.

The only way to achieve this is to float left i think right? But if i do so, it will break in a new line if the elements are larger than the containers width...

here the code: (please do not mind syntax-error)

<div style="position:relative;width:300px;height:300px;overflow:scroll">
 <div id="1" style="position:relative;width:200px;height:50px;float:left;"></div>
 <div id="2" style="position:relative;width:200px;height:50px;float:left;"></div>
</div>

Div with id 2 will break in a new line... how to avoid this?

Answer 1

If you set display: inline-block; on the inner DIVs and white-space: nowrap; on the container, I believe it'll have the desired effect...

HTML

<div class="relative">
    <div id="one"></div><div id="two"></div>
</div>

CSS

div.relative {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: scroll;
    white-space: nowrap;
}

div#one, div#two {
    display: inline-block;
    width: 200px;
    height: 50px;
}

This jsFiddle colorfully demonstrates the result.

Answer 2

Use white-space: nowrap on the parent div; and use display:inline-block for the inner divs.

<div style="position:relative;width:300px;height:300px;overflow:scroll;white-space: nowrap">
    <div id="1" style="display:inline-block; width:200px;height:50px;float:left;"></div>
    <div id="2" style="display:inline-block;width:200px;height:50px;float:left;"></div>
</div>