Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] układ z trzema kolumnami
Forum PHP.pl > Forum > Przedszkole
sweter
Witam, chciałem stworzyć stronę, która będzie składała się z 3 kolumn:

1. będzie miała szerokość 200px

2. będzie sama dobierała swoją szerokość (będzie wypełniać to miejsce, które zostanie z 1. i 3. kolumny)

3. będzie miała szerokość 200px

Ze zrobieniem takiego układu nie mam problemu. Jak jednak wykonać coś takiego, żeby druga kolumna sama ustalała swoją szerokość??

potreb
min-width, max-width + expression dla IE
Drav
chodzi ci o to, że powiedzmy obie kolumny mają bazowo po 200 px. 2 rozszerza się do 300 i chcesz, zeby 1 też sie tak rozszerzyła?
Jeśli dobrze Cię zrozumiałem to najprostsze rozwiązanie to takie:
index.htm
Kod
<div id="content">

<div id="1kolumna">
1 kolumna
</div>

<div id="2kolumna">
2 kolumna
</div>
</div>
oczywiście ilośc kolumna możesz zmieniać

styl.css
Kod
div#content {
width: 400px;
height: 200px;
overflow: hidden;
}

div#kolumna1 {
width: 200px;
height: 200px;
padding-bottom: 10000000px;
margin-bottom: -10000000px;
float: left;
}

div#kolumna2 {
  width: 200px;
  height: 200px;
  padding-bottom: 10000000px;
  margin-bottom: -10000000px;
  float: right;
  }

Mam nadzieję, że pomogłem


e:
Cytat(potreb @ 11.10.2009, 20:52:33 ) *
min-width, max-width + expression dla IE
jesli o to ci chodziło, no to kolega wyżej ma rcję, + ewentualnie to co ja, tyle, ze w 1 kolumnie (tej, która ma się nie powiększać) kasujesz

Kod
padding-bottom: 10000000px;
  margin-bottom: -10000000px;
sweter
Wielkie dzięki za pomoc i zainteresowanie, ale chodzi mi o coś takiego (oczywiście na divach):

  1.  
  2. <table width="100%" border="1">
  3. <tr>
  4. <td width="200">pierwsza</td>
  5. <td>druga</td>
  6. <td width="200">trzecia</td>
  7. </tr>
  8. </table>
  9.  
  10.  


athei
google - css layout 3 column liquid,
np.
  1. <div id="threecolwrap">
  2. <div id="twocolwrap">
  3. <div id="nav"></div>
  4. <div id="content"></div>
  5. </div>
  6. <div id="promo"></div>
  7. </div>
  8. #threecolwrap { float:left; width:100%; }
  9. #twocolwrap { float:left; width:100%; margin-right:-170px; }
  10. #nav { float:left; width:150px; }
  11. #content { width:auto; margin-left:150px; margin-right:170px; }
  12. #promo { float:left; width:170px; }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.