Floaten zonder overlapping?

[killer4all2]

Hallo,

Ik ben momenteel bezig met het scripten en designen van een clan website. Ik heb een eigen photoshop design gemaakt en heb op dit moment het probleem dat als ik in css 'float:left; of float:right;' gebruik, dat de divs die ik eronder plaats over elkaar heen lappen.

Dus <div id="header"></div> onder <div id="content">, dan zal de content div onder de header weergeven worden. Ik dacht dit probleem op te lossen met 'overflow:hidden;' Wat volgens mij in mijn andere script we leek te werken, maar wat nu niet meer werkt. Kan iemand mij helpen? Gebruik ik 't type 'ID' verkeerd en moet ik met 'Class' werken?

Als iemand mij kan helpen zou dat heel tof zijn !

Groetjes,
Rowan

 

[peter vazed]

Zonder code moeilijk te zeggen.
Evenwel met float kun je div's naast elkaar houden.
Doch wens je ze onder elkaar dien je clear te gebruiken.
<div style="clear: both;"></div>

 

[Goeroeboeroe]

't Heeft in ieder geval niets met id of class te maken. Alle eigenschappen kun je met beide gebruiken. Alleen mag id maar één keer op 'n pagina voorkomen, en class vaker.
En id heeft meer gewicht dan class:

<div id="ik-ben-een-id" class="ik-ben-een-class"></div>

div#ik-ben-een-id {color: blue;}
div.ik-ben-een-class {color: red;}

levert in principe een blauwe kleur op.

 

[killer4all2]

Ok bedankt! Dus als ik clear gebruikt kan ik ook gewoon een div eronder zetten begrijp ik? Zit momenteel op school, maar ga het proberen zodra ik thuis kom.

Bedankt!

Groetjes,
Rowan

 

[killer4all2]

Hoi Nog bedankt voor jullie reacties, maar ik heb het op deze manier opgelost Het leek mij wat mooier in het script.

Klein stukje van het script:

			<div id="BV-wrapper">
				<div id="bar-h4">
					<div id="bar-video"></div>
				</div>
			</div>

----------------------------
body		{
				background-color:white;
				font-family:Verdana, Arial;
				margin:0px;
				padding:0px;
			}
		
#wrapper	{
				overflow:hidden;
				margin:0 auto;
				width:1000px;
				background-color:#333333;
			}

#BV-wrapper	{
				height:204;
				width:1000px;
				height:204px;
			}
			
#bar-h3		{
				background:url(images/bar_h3.png) no-repeat;
				height:204px;
				width:669px;
				float:left;
			}
			
#bar-h4		{
				background:url(images/bar_h4.png) no-repeat;
				height:204px;
				width:331px;
				float:right;
			}

 

[Goeroeboeroe]

Klopt. Dat met die overflow: hidden is 'n relatief nieuwe manier, die bij toeval is ontdekt en waarvan niemand eigenlijk schijnt te weten hoe hij werkt. Maar hij werkt en is netter dan de oude manier met 'n extra div of zo en clear: both. Ik vergeet 'm ook nog steeds regelmatig en gebruik dan de 'oude' manier