login  Naam:   Wachtwoord: 
Registreer je!
 Forum

2 kolommen probleem (Opgelost)

Offline Habsmart - 28/08/2009 23:45
Avatar van HabsmartNieuw lid Beste,
Ik maak de laatste tijd veel vaker layouts, en telkens kom ik weer bij het zelfde probleem.
Mijn layout bestaat uit vakjes. nu heb ik dus in de eerste kollom een vakje, en in de tweede. Ik scheid de kolommen gewoon via float: left;
Maar, nu gaat het vakje uit de 2e kolom over de hele pagina, dus onder het vakje in de eerste kolom door.

Mijn CSS:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body 
  2. {
  3. 	background: url('images/bg.gif') repeat-x;
  4. 	background-attachment: fixed;
  5. 	font-family: Verdana;
  6. 	font-size: 11px;
  7. }
  8.  
  9. #container_radio
  10. {
  11. 	background: #DCDCDC;
  12.  
  13. 	border-bottom: 1px solid #000000;
  14. 	position: fixed;
  15.  
  16. 	width: 100%;
  17. 	height: 30px;
  18. 	top: -0px;
  19. 	margin-left: -8px;
  20. 	margin-right: -10px;
  21. 	margin-bottom: 30px;
  22.  
  23. 	padding-top: 5px;
  24. 	padding-left: 5px;
  25. 	padding-right: 5px;
  26. 	padding-bottom: 5px;
  27. }
  28.  
  29. #container_header
  30. {
  31. 	background: url('images/banner.png') no-repeat #dcdcdc;
  32.  
  33. 	border-top: 1px solid #C6C6C6;
  34. 	border-left: 1px solid #C6C6C6;
  35. 	border-right: 1px solid #C6C6C6;
  36.  
  37. 	border-bottom: 2px solid #C6C6C6;
  38.  
  39.  
  40. 	width: 965px;
  41. 	height: 90px;
  42. 	margin-top: 57px;
  43. 	margin-left: auto;
  44. 	margin-right: auto;
  45.  
  46. 	padding-top: 5px;
  47. 	padding-left: 5px;
  48. 	padding-bottom: 5px;
  49. }
  50.  
  51. #container
  52. {
  53. 	background: #ffffff;
  54.  
  55. 	border-top: 1px solid #C6C6C6;
  56. 	border-left: 1px solid #C6C6C6;
  57. 	border-right: 1px solid #C6C6C6;
  58.  
  59. 	border-bottom: 2px solid #C6C6C6;
  60.  
  61.  
  62. 	width: 965px;
  63. 	margin-top: 15px;
  64. 	margin-left: auto;
  65. 	margin-right: auto;
  66.  
  67. 	padding-top: 5px;
  68. 	padding-left: 5px;
  69. 	padding-bottom: 5px;
  70. }
  71.  
  72. #container_menu
  73. {
  74. 	width: 275px;
  75. 	padding: 5px;
  76. 	float: left;
  77. }
  78.  
  79. #container_content
  80. {
  81. 	width: auto;
  82. 	padding: 5px;
  83. }
  84.  
  85. #footer
  86. {
  87. 	clear: both;
  88. }
  89.  
  90. .vakje
  91. {
  92. 	background: #ffffff;
  93. 	border: 1px solid #000000;
  94. 	padding: 5px;
  95. 	margin-bottom: 10px;
  96. 	margin-right: 10px;
  97.  
  98. }
  99.  
  100. .blauw
  101. {
  102.  
  103. 	background: #3EADE8;
  104. 	padding: 2px;
  105. 	color: white;
  106. 	margin-bottom: 5px;
  107. }


HTML:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <link rel='stylesheet' type='text/css' href='style.css'/>
  2. <link rel='stylesheet' type='text/css' href='vakjes.css'/>
  3. </head>
  5. 	<div id="container_radio">
  6. 		Hierzo radio speler een DJ Says etc.
  7. 	</div>
  8. 	<div id="container_header">
  9.  
  10. 	</div>
  11.  
  12. 	<div id="container">
  13. 		<div id="container_menu">
  14. 			<div class="vakje">
  15. 				<div class="blauw">
  16. 					Test?
  17. 				</div>
  18. 			Jahaaa!
  19. 			</div>
  20. 		</div>
  21.  
  22. 		<div id="container_content">
  23. 			<div class="vakje">
  24. 				<div class="blauw">
  25. 					Test?
  26. 				</div>
  27. 			Jahaaa!
  28. 			</div>
  29. 		</div>


Alvast bedankt

2 antwoorden

Gesponsorde links
Offline Koen - 28/08/2009 23:48
Avatar van Koen PHP expert Probeer Google.be: faux columns eens 
Offline Habsmart - 28/08/2009 23:52
Avatar van Habsmart Nieuw lid Bedankt.
De oplossing was overflow: hidden;
xD
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.181s