Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Lewa kolumna 200px prawa - cała reszta
konrados
post
Post #1





Grupa: Zarejestrowani
Postów: 623
Pomógł: 79
Dołączył: 16.01.2008

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

Witam,

Domyślam się, że problem był wałkowany wielokrotnie, ale jakoś tak ani wyszukiwarka tego forum ani googlowa nic mi sensownego nie pokazuje, bo też i po prostu nie wiem co w nią wpisać.

Chodzi o to, że chciałbym aby w layoucie lewa kolumna miała 200px a prawa - całą dostępną resztę (w x).

Tu jest stronka: http://jsfiddle.net/b4mQc/

A tu mój dotychczasowy, wstępny kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 	<style>
  6. 	body {
  7. 		margin:20x;
  8. 		border:1px solid red;
  9. 	}
  10. 	.page_top{
  11. 		background-color: #999;
  12. 	}
  13. 	.page_contents_left{
  14. 		width:200px;
  15. 		background-color: #aaa;
  16. 		float:left;
  17. 	}
  18. 	.page_contents_right{
  19. 		/*width:100%;*/
  20. 		background-color: #ccc;
  21. 		float:left;
  22. 	}
  23.  
  24. 	.page_footer{
  25. 		clear:both;
  26. 		width:100%;
  27. 		background-color: #ddd;
  28. 	}
  29. 	</style>
  30. </head>
  31.  
  32. <body>
  33. <div class="page_top">
  34. 	To jest top, ma zajmować 100% przestrzeni w x i to się udało
  35. </div>
  36.  
  37. <div class="page_contents_left">
  38. 	To jest left, ma zajmować 200px przestrzeni w x - to też się udało
  39. </div>
  40.  
  41. <div class="page_contents_right">
  42. 	To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br/>
  43. 	To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br/>
  44. 	To jest right, ma zajmować <b>pozostałą</b> przestrzeń w x<br/>
  45. </div>
  46.  
  47. <div class="page_footer">
  48. 	a to jest footer, też działa.
  49. </div>
  50. </body>
  51. </html>  
[HTML] pobierz, plaintext


Jak to zrobić? Przy czym page_contents_right ma zajmować swoją przestrzeń (pozostałą) niezależnie od treści - tam może nawet nic nie być.

Ten post edytował konrados 12.11.2010, 19:06:52
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
konrados
post
Post #2





Grupa: Zarejestrowani
Postów: 623
Pomógł: 79
Dołączył: 16.01.2008

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

W moim kodzie page_right też miał float:left (podobnie jak page_left). I dlatego nie działało, choć nie wiem czemu. Co oznacza, że muszę wrócić do książki "css dla debili" (IMG:style_emoticons/default/smile.gif)

Tak więc ok, prawie działa - ale jest kolejny problem - page_right jeśli jest wyższa niż page_left, zaczyna otaczać od dołu page_left.

Aktualnie to wygląda tak: http://jsfiddle.net/b4mQc/
Co mam z tym zrobić?

Zastanawiam się, czy aby tego wszystkiego nie zrobić z table, chyba, że na powyższy problem jest jakieś proste rozwiązanie.

Ten post edytował konrados 12.11.2010, 20:36:40
Go to the top of the page
+Quote Post

Posty w temacie
- konrados   [CSS]Lewa kolumna 200px prawa - cała reszta   12.11.2010, 18:20:49
- - Daiquiri   .page_contents_right i .page_contents_left wrzuć w...   12.11.2010, 18:35:52
- - konrados   To nic nie dało, spójrz: http://jsfiddle.net/b4mQc...   12.11.2010, 19:01:33
- - chemikpil   Hmm... z tego co ja pamiętam to 100% = 100% a nie ...   12.11.2010, 19:14:40
- - konrados   CytatMusisz nadać mu szerokość równą pozostałej pr...   12.11.2010, 19:17:03
- - Daiquiri   Działa, działa: [HTML] pobierz, plaintext <!DOC...   12.11.2010, 19:19:30
- - konrados   W moim kodzie page_right też miał float:left (podo...   12.11.2010, 19:36:52
- - chemikpil   Ok to lekka poprawa kodu @Daiquiri [HTML] pobierz,...   12.11.2010, 22:09:09
- - konrados   OK, dzięki wam! Ale przy tym stopniu skompliko...   13.11.2010, 11:48:40

« Następny starszy · Przedszkole · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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