Forum PHP.pl > [CSS] rozciągnięcie divów

Pomoc - Szukaj - Użytkownicy - Kalendarz

DawPi

23.09.2008, 01:43:28

Witam,

mam problem z dopasowaniem do siebie trzech divów.
Oto moj kod css:

Kod

.gora {
float:left;
background-color:#DCE6F2;
padding:3px;

border-bottom: thin dotted #A2C1E0;
border-top: thin dotted #A2C1E0;
}

.gorar {
float:left;
text-align:right;

background-color:#DCE6F2;
padding:3px;
border-top:dotted;
border-bottom: thin dotted #A2C1E0;
border-top: thin dotted #A2C1E0;
}

.dol {
clear:both;
background-color:#E8EFF5;
padding:3px;

}

Oraz html:

[HTML] pobierz, plaintext 
<div CLASS="gora">first </div>
<div CLASS="gorar">second </div>
<div CLASS="dol">third  </div>
[HTML] pobierz, plaintext

Problem jest tego typu, ze dwa górne divy nie dopasowują się długością do dolnego.

Czy ktoś spotkał się z podobnym problemem i wie jak go rozwiązać ?

kazag

23.09.2008, 05:24:16

Należy nadać im szerokość, bo inaczej będą zawsze miały szerokość odpowiednią do treści.
Poza tym, ja jak mam dwa divy o jednemu daje float:left a drugiemu right, ale to chyba nie wiele zmienia, bo problem leży w szerokości.

hateman

23.09.2008, 11:27:51

Nadaj im stałe szerokości biorąc pod uwagę padding i margin

Kod

.gora {
float:left;
background-color:#DCE6F2;
padding:3px;
width: 394px;

border-bottom: thin dotted #A2C1E0;
border-top: thin dotted #A2C1E0;
}

.gorar {
float:left;
text-align:right;

background-color:#DCE6F2;
padding:3px;
width: 394px;

border-top:dotted;
border-bottom: thin dotted #A2C1E0;
border-top: thin dotted #A2C1E0;
}

.dol {
clear:both;
background-color:#E8EFF5;
padding:3px;
width: 794px;
}

DawPi

23.09.2008, 15:30:28

Witam,
dziękuję za pomoc.

Mam kolejne pytanie: czy istnieje jakiś sposób dopasowywania jednak tej szerokości czy muszę zrobić to jednak na tabelkach ?

hateman

25.09.2008, 09:19:37

Nie rozumiem.
nie chcesz podawać szerokości?
to może podaj w %
tamte po 50%
a to na dole 100%

możesz też całość dać w diva

[HTML] pobierz, plaintext 
<div>
<div CLASS="gora">first </div>
<div CLASS="gorar">second </div>
<div CLASS="dol">third  </div>
</div>
[HTML] pobierz, plaintext

pomogło?

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.