CODEWITHSUNDEEP
javascripthtmlcss
gigi
gigi

Reputation: 3936

div align issue

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: enter image description here

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

Upvotes: 2

Views: 80

Answers (6)

user984187
user984187

Reputation:

Clearing a div is not a very nice way of forcing the container div to grow.

the way i always do it is like this:

<div style="width:400px; min-height=:150px; overflow: hidden;"

    <div style="width:200px; height:300px; float:left;">content goes here....</div>

    <div style="width:200px; height:300px; float:left;">content 2 goes here....</div>

</div>

more easy like this you wont get. when this is not working because for some reason (like i had) content goes out of the div with minus margins try using another div behind it.
it will keep the code nice and clean.

Upvotes: 0

Marc Uberstein
Marc Uberstein

Reputation: 12541

Just add a clear div below your floating divs:

Struction : CLEARER being the clear div [see HTML]

-Container Start-

-floating items-

-CLEARER-

-Container End-

HTML

<div style="clear: both;"></div>

Upvotes: 0

Aziz Shaikh
Aziz Shaikh

Reputation: 16534

Add clear:both like this:

<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 style="clear:both"></div>
</div>

Upvotes: 0

Michiel
Michiel

Reputation: 8103

Make sure the first div isn't that wide
OR
give the first div a display: inline-block;
OR
set a <div class="clear"> div at the end with a linked style .clear { clear: both;}

Upvotes: 2

Prisoner
Prisoner

Reputation: 27628

<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 style="clear: both;"></div>
</div>

Upvotes: 1

thirtydot
thirtydot

Reputation: 228202

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.

Upvotes: 1

Related Questions