Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: 2 kolumny
Forum PHP.pl > Forum > Po stronie przeglądarki
slawo
  1. #leftcol{
  2. width:500px;
  3. text-align:top;
  4. background-color: #ffffff;
  5. float:left;
  6. }
  7. #rightcol{
  8. float:right;
  9. width:300px;
  10. text-align:top;
  11. background-color: #ffffff;}



Witam, mam na stronie 2 kolumny. Z tym, że jedna jest dłuższa a jedna krótsza. Jak zrobić żęby te kolumny były równe? Niezależnie od tego w której kolumnie jest więcej treści.
luckyps
Mi do głowy przychodzi tylko rozwiazanie javascriptowe...
Pobrac wysokosc obu kolumn, sprawdzic ktora jest wieksza i ustawic wysokosc tej nizszej na wysokosc tej wyzszej.

  1. var leftcol = document.getElementById ("leftcol");
  2. var rightcol = document.getElementById ("rightcol");
  3.  
  4. leftHeight = leftcol.clientHeight;
  5. rightHeight = leftcol.clientHeight;
  6.  
  7. if(leftHeight > rightHeight) {
  8. rightcol.style.height = String(leftHeight)+"px";
  9. } else {
  10. leftcol.style.height = String(rightHeight)+"px";
  11. }

sprawdz czy dziala...
t_e_l
Pierwsze lepsze z google...

Tutaj
albo
Tutaj

Adi32
Parametr height by nie wystarczył?

Ewentualnie ująć je w diva o ustalonej wysokości a kolumnom nadać height: 100%;
kujawska
Spróbuj takiego rozwiązania:
  1. <div id=container" style="width:400px;background:silver;">
  2. <div id="lewy" style="background:yellow;width:200px;float:left;">
  3. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh
  4. augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam
  5. pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque
  6. semper justo at risus. Donec venenatis, turpis vel hendrerit interdum,</p>
  7. </div>
  8. <div id="prawy" style="background:silver;width:200px;float:left;">
  9. <p>PRAWY</p>
  10. </div>
  11. <div id="stopka" style="clear:both;;width:100%;height:0px;">
  12. </div>
  13. </div>
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-2025 Invision Power Services, Inc.