[html/css] drobna pomoc - 3 divy, jeden o dynamicznej szer.

[darqnies]

Mam drobny problem. Głupio to zabrzmi ale w HTML/CSS .

Kod: Zaznacz cały

<div style="width:30px; background:red;">1</div>
<div style=" ?? ">2</div>
<div style="width:60px; background:green; float:right;">3</div>

Jak wystylować div-a z "2" w środku, aby automatycznie dopasował się na maksymalną możliwą szerokość (nie przenosząc diva po prawej stronie do nowej linii)?

Za pomoc z góry dzięki.
Pozdrawiam.

[Stig]

Zastosuj "tabelki"

HTML:

Kod: Zaznacz cały

 <div class="table">
   <div class="row">
     <div class="cell element1">
          <p>1</p>
     </div>
     <div class="cell element2">
          <p>2</p>
     </div>
     <div class="cell element3">
          <p>3</p>
     </div>
   </div>
 </div>

CSS:

Kod: Zaznacz cały

 .table {
 display: table;
 width:100%;
 }
 .row {
 display: table-row;
 width:100%;
 }
 .cell {
 display: table-cell;
 padding: 1em;
 }
 .element1 {
 background:red;
 width: 30px;
 }
 .element3 {
 background:green;
 width:60px;
 }