float:left problem

i have 3 div in my page. named with blok1, blok2 a开发者_Go百科nd blok3.

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

screenshot link

i want to get this result.

screenshot link2

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>

so http://jsfiddle.net/6v5gM/

instead of http://jsfiddle.net/JmWZp/1/

just use a display:table; on the divs

you should add the float attribute to blok1 and blok2 in order to get one next to the other.

note: each div have to have a defined width and height.

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>