Forum PHP.pl > prosty layout z floatami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

zwierzołak

5.06.2009, 12:57:21

Zrobiłem sobie taki layout - nagłówek, treść i stopka - w treści 3 divy z float:left. Nie wiem dlaczego te divy(.content_box) nie rozpychają diva(#content) - w ogóle go nie widać na stronie(ma ustawione żółte tło, zresztą w firebugu też go nie pokazuje). Co zrobić, żeby div#content się pokazał normalnie, a w nim te .content_boxy?

index.html:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test css 2</title>
  <link rel="Stylesheet" href="style.css" type="text/css"/>
</head>
 
<body>
 
<div id="container">
 
    <div id="header">
        <p>Header header header header header header header header header header header header header header header header header header header header header header header header header </p>
    </div>
 
    <div id="content">
 
        <div class="content_box">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        </div>
 
        <div class="content_box">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        </div>
 
        <div class="content_box">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        </div>
 
    </div>
 
    <div id="clear"></div>
 
    <div id="footer">
        <p>Footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer.</p>
    </div>
 
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

style.css:

[HTML] pobierz, plaintext 
#container {
    background-color: green;
    width: 1000px;
    margin: 0 auto 0 auto;
}
 
#content {
    background-color: yellow;
}
 
.content_box {
    background-color: red;
    width: 300px ;
    float: left;
    margin: 0 5px 0 5px;
}
 
#clear {
    clear: both;
}
 
#footer {
    background-color: blue;
}
[HTML] pobierz, plaintext

erix

5.06.2009, 14:18:12

Wrzuć gdzies ten kod na serwer. Ale strzelam w ciemno, że trzeba dodać overflow: hidden dla #content.

zwierzołak

5.06.2009, 20:46:14

dobry strzał

tutaj jest jak było na początku
a tutaj po dodaniu overflow: hidden dla #content - o to mi chodziło

Tylko czy możesz mi jeszcze wytłumaczyć dlaczego? overflow: hidden chyba służy do ukrywania treści, która nie mieści się w elemencie (przynajmniej np tutaj tak piszą: http://www.kurshtml.boo.pl/css/przepelnienie,rozmiary.html) a nie do ustawiania elementowi możliwości rozpychania przez floaty. I jeszcze jak .content_box usunąć float:left to #content jest normalnie rozpychany bez overflow: hidden -> tutaj tak zrobiłem. Dlaczego floaty tak nie rozpychają domyślnie?

Z czego to wynika? Może powinienem się cieszyć że działa i siedzieć cicho, ale chciałbym zrozumieć jakimi zasadami się to rządzi...

erix

5.06.2009, 21:51:11

Cytat

a nie do ustawiania elementowi możliwości rozpychania przez floaty

Wykreśl to nie.

Cytat

Może powinienem się cieszyć że działa i siedzieć cicho, ale chciałbym zrozumieć jakimi zasadami się to rządzi...

Gdyby nie IE, to byśmy stosowali display: table-cell i nie kombinowali tak z float...

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.