DIV in DIV

Door Eddy Achterberg op 26-06-2012 13:46 gewijzigd op 26-06-2012 13:48

1.442 views

Hallo,

Ik heb een div waar ook weer meerder divjes later in moeten komen. Deze div heeft de volgende CSS code:

#container
background: none repeat scroll 0 0 white;
margin: 0 auto;
padding: 10px;
position: relative;
width: 930px;

Als ik nu meerder divjes maak lijkt het wel alsof deze divjes niet in de #container vallen.
Vaak als ze langer zijn dan blijft de #container maar een dun divje
Het lijkt wel of de rest van mijn divjes de container negeren.

#main
background: none repeat scroll 0 0 #E8E8E8;
border: 1px solid #CCCCCC;
float: left;
font-size: 80%;
padding: 10px;
position: relative;
width: 630px;

De #main div valt dus niet in de container.

Weet iemand hoe dit komt?

Thanks

Reshad F

26-06-2012 13:50

een container div wordt meestal gebruikt om te positioneren. en alle andere divs bij elkaar te houden en dat is volgens mij ook de bedoeling niet?

volgens mij kijk jij nu met firebug/chromeDeveloperTools waardoor je in de war raakt. ik zeg let daar niet op.

John Cena

26-06-2012 13:54

Heb je een adres...?

Eddy Achterberg

26-06-2012 13:56

Ja klopt ik maak gebruik van Firebug.

Nee nog niet geen adres. Werk lokaal.

Hoe zou ik dan deze DIV moeten noemen?

thanks!

Elwin - Fratsloos

26-06-2012 13:57

Het komt doordat de div die erin zit een float heeft. Gebruik een clear-div (of andere methode) om de container uit te rekken. Deze cleardiv werkt goed:

div.clear {
	width: 100%;
	height: 1px;
	font-size: 1px;
	line-height: 1px;
	clear: both;
	margin: 0;
	padding: 0;
}

Zet de clear-div onder de floatende divs, elke keer als je horizontaal een einde wilt maken aan het floaten: <div class="clear"> </div>

Eddy Achterberg

26-06-2012 13:57

kwam er net wel achter dat het met overflow:hidden is opgelost. Maar is dat wel de juiste manier van werken?

N K

26-06-2012 14:06

m\oet je #main niet absoluut positioneren binnen de container?

Kris Peeters

26-06-2012 14:21

Dus, wanneer je met float: left werkt ...

Je kan zo'n constructie opzetten. Als voorbeeld thumlbnails.


<div id="container">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
..
  <div class="clear"></div>
</div>


#container {
  width: 930px;
}
.thumb {
  float: left;
  width: 100px;
  height: 100px;
}
.clear {
  clear: both;
}

Eddy Achterberg

26-06-2012 14:31

Dus onder elke div waar ik float in gebruik moet ik <div class="clear"></div> gebruiken? Of alleen in de eerst div van de pagina?

[size=xsmall]Toevoeging op 26/06/2012 14:33:56:[/size]

ik heb op deze website van mij ook al dat probleem (www reisjezoeken nl). Je ziet dat de #wrapper, met daarin de rest van mijn divjes, niet meerekt.

Thnks!!

Reageren

Inloggen om te reageren