Question

This is the code:

<div>
    <div style="border:1px solid black;width:250px;float:left">
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
    </div>
    <div style="border:1px solid black;float:right">
        <div>2222</div>
    </div>
</div>

And this is what i am getting:

How can i make that div not get out from the content place holder ( it has no fixed width, if i put any dat in there it just stretches down, it seem to have a problem with that float:left

Answer 1

You need to clear/contain your floats.

The best simple way to do this is to add overflow: hidden to your outer <div>:

<div style="overflow: hidden">
    <div style="border:1px solid black;width:250px;float:left">
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
        <div>1111</div>
    </div>
    <div style="border:1px solid black;float:right">
        <div>2222</div>
    </div>
</div>

Another common fix is to use clearfix.

Either method is fine, but overflow: hidden almost always works (..except when you don’t want the overflow to be hidden) and is easier.