Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> prosty layout z floatami, ..tylko dlaczego się rozpada?
zwierzołak
post
Post #1





Grupa: Zarejestrowani
Postów: 78
Pomógł: 1
Dołączył: 25.03.2008

Ostrzeżenie: (0%)
-----

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 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <title>test css 2</title>
  6.   <link rel="Stylesheet" href="style.css" type="text/css"/>
  7. </head>
  8.  
  9. <body>
  10.  
  11. <div id="container">
  12.  
  13.     <div id="header">
  14.         <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>
  15.     </div>
  16.  
  17.     <div id="content">
  18.  
  19.         <div class="content_box">
  20.             <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>
  21.         </div>
  22.  
  23.         <div class="content_box">
  24.             <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>
  25.         </div>
  26.  
  27.         <div class="content_box">
  28.             <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>
  29.         </div>
  30.  
  31.     </div>
  32.  
  33.     <div id="clear"></div>
  34.  
  35.     <div id="footer">
  36.         <p>Footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer.</p>
  37.     </div>
  38.  
  39. </div>
  40.  
  41. </body>
  42. </html>
[HTML] pobierz, plaintext


style.css:
[HTML] pobierz, plaintext 
  1. #container {
  2.     background-color: green;
  3.     width: 1000px;
  4.     margin: 0 auto 0 auto;
  5. }
  6.  
  7. #content {
  8.     background-color: yellow;
  9. }
  10.  
  11. .content_box {
  12.     background-color: red;
  13.     width: 300px ;
  14.     float: left;
  15.     margin: 0 5px 0 5px;
  16. }
  17.  
  18. #clear {
  19.     clear: both;
  20. }
  21.  
  22. #footer {
  23.     background-color: blue;
  24. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Wrzuć gdzies ten kod na serwer. Ale strzelam w ciemno, że trzeba dodać overflow: hidden dla #content.
Go to the top of the page
+Quote Post
zwierzołak
post
Post #3





Grupa: Zarejestrowani
Postów: 78
Pomógł: 1
Dołączył: 25.03.2008

Ostrzeżenie: (0%)
-----

dobry strzał (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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...

Ten post edytował zwierzołak 5.06.2009, 20:49:43
Go to the top of the page
+Quote Post
erix
post
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Cytat
a nie do ustawiania elementowi możliwości rozpychania przez floaty

Wykreśl to nie. (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

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...
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 27.09.2025 - 00:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn