Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Dwa divy - taka sama wysokość
Forum PHP.pl > Forum > Przedszkole
dk1342
14.10.2009, 14:31:42
Witam, tworze sobie szablon i wygląda on mniej więcej tak:

LOGO
MENU GÓRNE
MENU LEWE | TREŚĆ
STOPKA

No i mam problem z Menu lewym i treścią, nie chce ustalać stałych wysokości, ale chce żeby były takie same, czyli np. jeśli dam więcej tekstu do diva treść a w menu będzie mniej treści to i tak one się wyrównają. Nie wiem czy dokładnie wytłumaczyłem, teraz przedstawię na screenach i kodzie.

http://iv.pl/images/tlbx0n079i7n8df2lop6.png

I jak widać treści jest więcej niż podpunktach w menu więc menu jest mniejsze od treści a chciałbym żeby były równo, żeby automatycznie menu się powiększało jak się doda więcej treści

Tutaj rysunek w paincie jak to ma wyglądać

http://iv.pl/images/p5rh15fkmxwbbx0urz2.png

Kod html:
[HTML] pobierz, plaintext 
  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
  4.  <link rel="Stylesheet" type="text/css" href="style.css" /> 
  5. <title>cos</title> 
  6. </head> 
  7. <body>
  8. <div id="top">
  9. <div id="logo"> 
  10. </div>
  11. <div id="menu_gorne">
  12. Menu górne
  13. </div>
  14.  
  15. <div id="menu_lewe">
  16. Indeks <br />
  17. Coś <br />
  18. Coś 2 <br />
  19. </div>
  20. <div id="tresc">
  21. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  22. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  23. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  24. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  25. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  26. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  27. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  28. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  29. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  30. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  31. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  32. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  33. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  34. tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc
  35. </div>
  36. <div id="stopka">
  37. Stopka
  38. </div>
  39.  
  40. </div>
  41. </body> 
  42. </html>
[HTML] pobierz, plaintext


CSS:
[CSS] pobierz, plaintext 
  1. body 
  2. {
  3. 	background-color: #454545;
  4. }
  5. #top
  6. {
  7. 	width: 1002px;
  8. 	margin: auto;
  9. }
  10. #logo
  11. {
  12. 	width: 1000px;
  13. 	height: 180px;
  14. 	background-color: #000;
  15. 	border: 1px solid #fff;
  16. }
  17. #menu_gorne
  18. {
  19. 	border: 1px solid #fff;
  20. 	width: 1000px;
  21. 	height: 25px;
  22. 	background-color: #000;
  23. }
  24. #menu_lewe
  25. {
  26. 	width: 200px;
  27. 	float: left;
  28. 	background-color: #fff000;
  29. 	margin: 0;
  30. 	padding: 0px;
  31. }
  32. #tresc
  33. {
  34. 	width: 802px;
  35. 	margin: 0px;
  36. 	padding: 0px;
  37. 	background-color: #fff;
  38. 	float: right;
  39. }
  40. #stopka
  41. {
  42. 	width: 1002px;
  43. 	height: 35px;
  44. 	background-color: #000;
  45. }
[CSS] pobierz, plaintext


Nie mam pojęcia jak to zrobić.
Maxik
14.10.2009, 14:39:43
Słowo klucz: faux columns, http://ludwik.org/blog/faux-columns-pl/
dk1342
14.10.2009, 14:45:02
Dokładnie o to mi chodziło, nie przepuszczałem że będzie to takie proste.
Dzięki.
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.