Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Wyświetlanie divów obok siebie
Forum PHP.pl > Forum > Przedszkole
Lethys
6.09.2013, 15:52:11
Witam,

Mam problem z poprawnym wyświetleniem dwóch divów obok siebie. Wiem, że wiele razy temat był wałkowany ale mimo, że ogarnąłem podobne tematy nadal coś nie chce działać.

Jak powinno być: Div Main powinien się dzielić na dwa odrębne divy obok siebie main_left i main_right. Obecnie main_right przejmuje właściwości main_left, zespaja się z nim.

Tak to wygląda:

Screen: http://oi41.tinypic.com/1zzj5lv.jpg

W ramce powinien być tylko prawy div, a lewy przejmuje tak jakby właściwości css tego prawego diva i też mam ramke :?

Kod:

HTML

[HTML] pobierz, plaintext 
  1.  <div id="main">
  2.  
  3.  <div id="main_left">
  4.  <h2>Strona główna</h2><hr />
  5.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor quam a nisl suscipit ultricies. Morbi consectetur semper massa, at volutpat lorem rhoncus a. Sed posuere, nisl vel convallis luctus, neque ipsum gravida orci, eu luctus turpis velit ut mi. Quisque tempor libero eu libero sodales pulvinar. Quisque tincidunt interdum elit, nec tempus tortor placerat in. Fusce vulputate, nisl vitae interdum placerat, diam nulla ultrices elit, et molestie justo justo ac elit. Praesent id diam elementum, ornare nisi non, consectetur dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse fringilla mauris mauris, at posuere justo rutrum lacinia. </p>
  6.  
  7.  </div>
  8.  
  9.  <div id="main_right">
  10.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor quam a nisl suscipit ultricies. Morbi consectetur semper massa, at volutpat lorem rhoncus a. Sed posuere, nisl vel convallis luctus, neque ipsum gravida orci, eu luctus turpis velit ut mi. Quisque tempor libero eu libero sodales pulvinar. Quisque tincidunt interdum elit, nec tempus tortor placerat in. Fusce vulputate, nisl vitae interdum placerat, diam nulla ultrices elit, et molestie justo justo ac elit. Praesent id diam elementum, ornare nisi non, consectetur dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse fringilla mauris mauris, at posuere justo rutrum lacinia. </p>
  11.  </div>
  12.  
  13.  <div class="clear"></div>
  14.  </div>
[HTML] pobierz, plaintext



CSS

[HTML] pobierz, plaintext 
  1. #main{
  2. color: #4d4e4f;
  3. margin-left: 5%;
  4. margin-right: 5%;
  5. margin-top: 20px;
  6. padding-bottom:80px; /* Height of the footer */
  7. }
  8.  
  9. #main_left{
  10. width: 70%;
  11. float: left;
  12. margin-right: 50px;
  13. }
  14.  
  15. #main_right{
  16. padding: 50px;
  17. border:2px solid;
  18. border-radius:2px;
  19. box-shadow: 10px 10px 5px #888888;
  20. }
  21.  
  22. .clear{
  23. clear: both;
  24. }
[HTML] pobierz, plaintext
martex
6.09.2013, 16:02:07 
[HTML] pobierz, plaintext 
  1.     #main{
  2. 	width:1200px;
  3. 	position:relative;
  4.     color: #4d4e4f;
  5.     margin-left: 5%;
  6.     margin-right: 5%;
  7.     margin-top: 20px;
  8.     padding-bottom:80px; /* Height of the footer */
  9.     }
  10.  
  11.     #main_left{
  12.     width:750px;
  13.     float: left;
  14.     margin-right: 50px;
  15.     }
  16.  
  17.     #main_right{
  18. 	width:250px;
  19. 	float:left;
  20.     padding: 50px;
  21.     border:2px solid;
  22.     border-radius:2px;
  23.     box-shadow: 10px 10px 5px #888888;
  24.     }
  25.  
  26.     .clear{
  27.     clear: both;
  28.     }
  29.  
[HTML] pobierz, plaintext


ustawilem ci na sztywno teraz potrenuj i sam poustawiaj czy % czy pixy smile.gif
Turson
6.09.2013, 16:08:34
Już nic
martex
6.09.2013, 16:09:51
jak bedzie chcial % to musi kleic do lewego
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.