Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: DIV-y
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
magusia
Walczę z tym już któryś raz, ale mam już dość rozwiązań połowicznych;)
Mam coś takiego:
  1. <?php
  2. $r .= '<div id="center_of_page">';
  3. $r .= '<div id="left">';
  4. $r .= $left;
  5. $r .= '</div>';
  6. $r .= '<div id="center">';
  7. $r .= $center;
  8. $r .= '</div>';
  9. $r .= '<div id="right">';
  10. $r .= $right;
  11. $r .= '</div>';
  12. $r .= '</div>';
  13. ?>

I style do tego:

Kod
#center_of_page
{
width: 600px;
background-color: #FFAAFF;
}
#left
{
float: left;
width: 200px;
text-align: left;
}
#center
{
float: left;
width: 300px;
text-align: left;
background-color: #FDFDFD;
}
#right
{
float: right;
width: 100px;
text-align: left;
}

Proszę używać bbcode.
poprawiam
revyag


I zawsze własnie jak mam coś takiego, czyli jakiś div i kilka divów w środku niego z parametrem float, to w ie mi ten zewnętrzny div je ładnie obejmuje, a w ff div wygląda jakby się kończył tam gdzie zaczyna. Jak to zwalczyć? Jak zrobić, żeby te divy zachowywały się identycznie w obu przeglądarkach?
revyag
Zapewne nie clear'ujesz kolejnego elementu.
  1. <div id="center_of_page">
  2. <div id="left"></div>
  3. <div id="center"></div>
  4. <div id="right"></div>
  5. <br style="clear:both" />
  6. </div>
magusia
Cytat(revyag @ 30.05.2007, 12:21:55 ) *
Zapewne nie clear'ujesz kolejnego elementu.
  1. <div id="center_of_page">
  2. <div id="left"></div>
  3. <div id="center"></div>
  4. <div id="right"></div>
  5. <br style="clear:both" />
  6. </div>


Faktycznie działa:) dzięki:)
Mam jeszcze pytanie, czy da się zrobić, żeby jedna z tych kolumn miała taką wysokość jak cały div ten zewnętrzny?
  1. height:100%
nic nie daje:(
Nie chcę jej ani divowi zewnętrznemu nadawać stałej wysokości, gdyż zmienia się jego zawartość w zależności od podstrony.
revyag
Jeśli chodzi o równe wysokości kolumn, to najprostszy sposób według mnie jest taki:
Kod
#center_of_page {
    overflow:hidden;
}
#left,#center,#right {
    padding-bottom:2000px;
    margin-bottom:-2000px;
}
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.