Reputation: 1

float:left problem

i have 3 div in my page. named with blok1, blok2 and blok3.

i'm adding to {float:left;} for blok1 div but getting this result:

screenshot link

i want to get this result.

screenshot link2

Upvotes: 0

Answers (4)

Pixelgrey

Reputation: 55

you should probably have it like this

#blok1 {float:left;}
#blok2 {float:right;}
#blok3 {clear:both;}

or ideally

If you want it like in a column, you should use it like this.

#ltCol {float:left;}
#rtCol {float:right;}

<div id="ltCol">
    <div id="blok1"></div>
    <div id="blok1"></div>
</div>
<div id="rtCol">
     <div id="blok2"></div>
</div>
<div style="clear:both;"></div>

Upvotes: 0

jrn.ak

Reputation: 36629

Try this:

<style type="text/css">
    #wrap div {
        border: 1px solid #000;
        float: left;
        margin: 5px;
        padding: 5px;
    }
    #div3 { clear: left; }
</style>

<div id="wrap">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

Upvotes: 2