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' , .
- Header
- Body
- Section 1
- Section 2
- Section 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;}
IEIE 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 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