[HTML][CSS] Divy - dopasowujące się do rozdzielczości Opcje

[bahh]

Witam,

mam 3 bloki obok siebie (na całą wysokość).

Blok 1 ma stałą szerokość 220 pikseli, blok 2 i 3 mają z reszty wolnej przestrzeni na prawo zajmować po 50% a ponad to, pomiędzy nimi, ma być 20 pikseli odstępu, w jaki sposób wykonać coś takiego bez użycia javascript? Chcę wykonać widgety na min-width i 100% width zgodnie z szerokością kolumny

[adbacz]

[HTML] pobierz, plaintext 
<div class="main">
  <div class="left"></div>
  <div class="right">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
  </div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.main {position:relative}
.main > .left {width:220px;position:absolute;left:0px;top:0px;z-index:1;}
.main > .right {margin-left:220px;}
.main > .right > div {float:left;width:50%;}
.main > .right > .inner-left {padding-right:10px;}
.main > .right > .inner-right {padding-left:10px;}
[CSS] pobierz, plaintext 

I to powinno wystarczyć. Dodatkowo musisz pamiętać, że jeśli chcesz zrobić margines w ten sposób to musisz użyć box-sizing:border-box;, bo box-sizing:content-box nie bierze pod uwagę paddingów i się te dwa DIVy w środku włożą pod siebie.


EDIT: Musisz jeszcze dodać takie coś, by div.right miał wysokość najwyższego DIVa w środku:

[CSS] pobierz, plaintext 
.main > .right:after {display:table;content:" ";clear:both;}
[CSS] pobierz, plaintext 

Ten post edytował adbacz 18.07.2014, 19:31:18