Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> 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:
  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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>test css 2</title>
  5. <link rel="Stylesheet" href="style.css" type="text/css"/>
  6. </head>
  7.  
  8.  
  9. <div id="container">
  10.  
  11. <div id="header">
  12. <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>
  13. </div>
  14.  
  15. <div id="content">
  16.  
  17. <div class="content_box">
  18. <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>
  19. </div>
  20.  
  21. <div class="content_box">
  22. <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>
  23. </div>
  24.  
  25. <div class="content_box">
  26. <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>
  27. </div>
  28.  
  29. </div>
  30.  
  31. <div id="clear"></div>
  32.  
  33. <div id="footer">
  34. <p>Footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer.</p>
  35. </div>
  36.  
  37. </div>
  38.  
  39. </body>
  40. </html>


style.css:
  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. }
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 26.09.2025 - 01:19