login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] container schiet omhoog bij float: left

Offline Rmy - 27/03/2008 19:30 (laatste wijziging 27/03/2008 19:38)
Avatar van RmyNieuw lid Beste,

Ben bezig met een simpele website waarbij in de container twéé elementen naast elkaar komen gepositioneerd. Ik gebruik hiervoor de volgende CSS code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2.     background-color: #f3f4f6;
  3.     margin: 0px;
  4. }
  5.  
  6. #container {
  7.     width: 850px;
  8.     margin: 0 auto;
  9.     background-color: #ffffff;
  10. }
  11.  
  12. #left {
  13.     float: left;
  14.     width: 241px;
  15.     height: 100px;
  16. }
  17.  
  18. #right {
  19.     float: left;
  20.     width: 546px;
  21.     height: 100px;
  22. }


Het probleem is dat door de elementen left en right de container niet word uitegerekt en opgekropt bovenaan de pagina komt te staan (heb ik getest met een border). Zodra de ik de float's weghaal dan word de website wel goed getoond. Ik heb van alles al geprobeerd (clear, position: relative & absolute) en ik krijg het niet voor elkaar.

Voorbeeld staat hier online. Wel even bekijken met Firefox aangezien Internet Explorer het vreemd genoeg wel goed toont.

3 antwoorden

Gesponsorde links
Offline Pieter - 27/03/2008 19:42
Avatar van Pieter Gouden medaille

SEO guru		 Nog een
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="clear:both;">
  2. test
  3. </div>
Toevoegen onderaan de HTML code.  
Offline MothZone - 27/03/2008 19:42
Avatar van MothZone PHP ver gevorderde Je zegt dat je clear al geprobeert hebt, maar heb het zelf ook eens geprobeert en het werkte.
Misschien heb je het verkeerd geplaatst.
Onder de div#right een nieuwe div aanmaken met als style clear:both
Offline Rmy - 27/03/2008 19:56
Avatar van Rmy Nieuw lid Dit werkt inderdaad perfect! Mijn html ziet er dus op dit moment zo uit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2. 	<div id="left">
  3. 		Left
  4. 	</div>
  5.  
  6. 	<div id="right">
  7. 		Right
  8. 	</div>
  9.  
  10. 	<div style="clear:both;"><!--No content --></div>
  11. </div>


Hartelijk bedankt allemaal! 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.179s