Ustawienie właściwości <float> dla elementu-dziecka spowoduje, że element rodzic nie będzie go opływał o ile sam nie ma takiej właściwości ustawionej. Ustawianie float:left albo float:right tylko po to, żeby rozciągnąć na wysokość rodzica jest jednak moim zdaniem rozwiązaniem nieeleganckim. W dodatku może powodować problemy, bo jakby na to nie spojrzeć, to jednak floaty dość istotnie wpływają na zachowania zarówno blokowych jak i liniowych elementów.

Przyjrzyjmy się bliżej problemowi. Na początek umieśćmy na stronie następujący fragment kodu:

<div id="nf">
	<div>To jest div numer jeden</div>
</div>

<div id="fl">
	<div>To jest div numer dwa</div>
</div>

Następnie elementom na stronie nadajmy pewne właściwości (część z nich ma tylko charakter dekoracyjny, aby lepiej uwypuklić problem):

div {
	padding:5px 10px;
	background:#ccc;
	color:#fff;
}

#nf {
	margin:0 0 5px;
}

#nf div {
	background:#333;
}

#fl div {
	float:left;
	background:#333;
}

Zauważmy, że div wewnątrz diva o id="nf" nie ma ustawionej właściwości float, dlatego jego rodzic (czyli div o id="nf") elegancko go opływa. To dlatego dookoła rzeczonego diva widać ładną szarą ramkę.

Co tym czasem dzieje się z divem numer dwa? Jak widać div wewnątrz diva o id="fl" ma ustawioną właściwość float, co wpływa na zachowanie elementu rodzica (czyli diva o id="fl"). Element rodzic nie opływa elementu dziecka i to jest właśnie meritum sprawy. Co zrobić, żeby to zmienić?

Na początku wspomniałem, że jednym ze sposobów jest nadanie elementowi rodzicowi właściwości float. Spróbujmy zatem – do styli dodajmy następujący wpis:

#fl {
	float:left;
}

Rezultat jest zadowalający, aczkolwiek, o czym wspominałem wcześniej, nadanie tej właściwości wpłynęło dość istotnie na element rodzic.

Rozwiązanie

Najprostsze rozwiązania są zawsze najlepsze – tak jest i w tym przypadku. Wystarczy, że divowi o id="fl" nadamy właściwość overflow. Spróbujmy:

#fl {
	overflow:auto;
}

A to i rezultat. Enjoy! ;)

Podobne wpisy: