Witam. Mam problem z ustawieniami DIVów. Najprościej będzie, jak opiszę to na uproszczonym przykładzie:
Fragment kodu:
<html>
<head>
</head>
<body>
<div style="border:solid green">
<div style="border:solid red; float:left; width:200px; margin:3px;">Ala ma kota kot ma Alę</div>
<div style="border:solid red; float:left; width:200px; margin:3px;">Ala ma kota kot ma Alę</div>
<div style="border:solid red; float:left; width:200px; margin:3px;">Ala ma kota kot ma Alę</div>
<div style="border:solid red; float:left; width:200px; margin:3px;">Ala ma kota kot ma Alę</div>
</div>
</body>
</html>
Cel, jaki chcę osiągnąć: jest jeden duży DIV (z zieloną ramką). Wewnątrz niego, ustawione obok siebie mniejsze DIVy (z czerwoną ramką).
Ustawienie czerwonych DIVów zrealizowałem przy użyciu float:left. Zachowują się teraz bardzo ładnie, przestawiają się razem ze zmianą okna przeglądarki i w ogóle są fajne. Gorzej z DIVem zielonym - zamiast obejmować te mniejsze, on się kurczy do minimum i zostaje z niego kreska. W efekcie w przeglądarce wygląda to tak:
Jak to poprawić?