Layout without float'ov

There are many different ways of css markup. Some are based on absolute positioning, others use floats. The first method does not support the “rubberiness” of the layout, while the second is a good way to markup.



But, like many powerful tools, floats have their flaws. For a start, layout based on floats is not so simple to understand, and floats are the source of many bugs (mostly in IE), which makes them not an ideal option in the pursuit of cross-browser compatibility.



So, it will be further discussed semantically correct layout method.

')

Let's start with the usual markup (based on divs)

  Header

  Body

          Section 1

      Section 2

      Section 3

    

  

  Footer





div' , , , div' , .

1. Header
2. Body
   
       
   1. Section 1
   2. Section 2
   3. Section 3
   
   
     
3. Footer

CSS



«» , .

* {margin:0;padding:0;}

#wp {width:55em;margin:0 auto;list-style-type:none;}

#bd {display:table;}

#doc {display:table-row;}

#s1,#s2,#s3 {display:table-cell;}



IE



IE LI display inline-block, :

1. IE Win {display: inline; zoom: 1}. «zoom:1» hasLayout-. ( layout layout)

2. IE Mac — {display:inline-block;float:left;}



:

• vertical-align LI ,
• width LI

#s1,#s2,#s3,{display:inline;zoom:1;vertical-align:top;}

#s1 {width:12em;}

#s2 {width:29em;}

#s3 {width:14em;}

/*\*//*/

#s1,#s2,#s3 {display:inline-block;float:left;}

#ft {clear:left;}

/**/



Css- , :

• IE (IE 7 IE Mac ) ,
• IE5 Mac <a href=«www.stopdesign.com/examples/ie5mac-bpf» title«»>

IE 5.1 , , <a href=«tjkdesign.com/articles/conditional_comments.asp» title« »> «if lt IE 5.5000»





… , .



, , IE5.5 , . , float- ( ), ( , ).



:

: 210, 400, 190

<a href=«tjkdesign.com/articles/css-layout/?6» title""> %: 20, 60, 20 / (800px/1200px)

<a href=«tjkdesign.com/articles/css-layout/?7» title""> %: 20, 60, 20