display:inline-block; and display:inline;

Wed, 14 Jan 2009 19:59:00 GMT

OPERA - ��, �� .

�� , �� . �� , �� "�� float", �� . �� .

�� , �� :)

�� , �� -�� , �� , �� , ��, � �� , � �� "�� float".

�� . � �� , �� , �� ? �� float � �� ?

�� . �� , �� , �� , �� , �� , �� . � �� html-�� -�� :)

�� , �� .

� �� , �� , �� ��, �� , � �� html-�� , �� .

�� .

html � css


<div id="main">

  <div id="middle">

    <div class="content">Content</div>

    <div class="left">Left</div>

    <div class="right">Right</div>

  </div>

</div>



<style type="text/css">

#main {

  border:#000 1px solid;

  margin:5px auto;

  width:980px;

}

#middle {

  background:#ff9;

  border-right:#cc9 200px solid;

  border-left:#ddd 200px solid;

}

.left,.content,.right {

  display:inline-block;

  position:relative;

  vertical-align:top;

}

.content {background:#ff9;margin-right:-100%;width:100%;}

.left {left:-200px;width:200px;}

.right {right:-377px;width:200px;}



</style>

<!--[if lt IE 8]>

<style type="text/css">

.left,.content,.right {display:inline;}

</style>

<![endif]-->

<!--[if IE ]>

<style type="text/css">

.right {margin-left:3px;}

</style>

<![endif]-->

�� mail �� , � �� , � ��, �� , � �� min/max-width, �� .

�� #middle �� , �� , �� border, �� , � �� �� �� .

�� , �� float, "��" �� display:inline-block;, � IE6(7) display:inline;

� �� , �� . �� html-�� , �� , �� display:table.

position:relative; �� .content �� , �� .

� �� . � �� "��" ��. �� , �� , �� .

�� OPERA, �� . �� , �� , �� . � � �� , �� OPERA �� , �� "��", � �� , ��, �� IE.

�� .

FireFox 3, IE6(7, 8beta2), SafariWin, Chrome - �� :)

Trifler Blog

display:inline-block; and display:inline;