css 3 kolommen, simpele vraag?

**Framboos** · 13/05/09 14:10

Ik wil een pagina maken die bestaat uit 3 vaste kolommen waarbij het geheel gecentreerd wordt. Ik kom veel voorbeelden tegen op internet en het lukt ook wel maar ik vind ze allemaal nogal omslachtig voor hetgeen ik wil bewerkstelligen. Zelf probeerde ik iets wat mij de meest simpele oplossing hiervoor leek en dit werkt ook op 1 ding na: de background uit 'inhoud' komt niet door. Ook de kleur niet. Raar, want dat is immers wel de div waar de rest inzit. Bij tables zou dit wel werken. Maar de div lijkt hier onzichtbaar te zijn terwijl de rest er toch inzit. Heeft iemand een idee wat ik vergeet? Of moet ik toch aan ingewikkeldere oplossingen denken met floats enzo?

Code:

<html>
<head>

<style type="text/css">

#wrapper {
	width:990px;
  margin-left: auto ;
  margin-right: auto ;
}

#inhoud {
	width:990px;
	position:relative;
	display: block;
	background: url(images/bg_inhoud.gif);
	background-color: #d19243;
}

#linkerkant {
	position:absolute;
	left:0px;
	width:180px;
}	

#midden {
	position:absolute;
	left:180px;
	width:560px;
}	

#rechterkant {
	position:absolute;
	left:740px;
	width:250px;
}	

</style>

</head>

<body>

<div id="wrapper">

	<div id="inhoud">
	
		<div id="linkerkant">foto 1</div>
		
		<div id="midden">Titel<br />
		Tekst bla bla bla bla<br />
		Tekst bla bla bla bla<br />
		</div>
		
		<div id="rechterkant">foto 2<br />foto 3<br />foto 4<br /></div>
		
	</div>
	
</div>
	
</body>
</html>

**YolkNet** · 13/05/09 15:56

Zet eens om elke div een rand met steeds een andere kleur: "border: 1px solid red;"

Je zult zien dat de div geen randen heeft, maar strepen geeft boven aan de pagina.
Jouw manier is dus wel korter, maar werkt niet

**Framboos** · 13/05/09 16:31

Ja klopt.

Wel irritant dat die omliggende div niet automatisch de hoogte meekrijgt van de hoogste div die daarbinnen ligt!

Als ik de div 'inhoud' een height meegeef dan werkt het wel. Ik weet alleen de hoogte niet want die is afhankelijk van de middelste of rechtertabel. Als ik de hoogte daaraan kan koppelen dan ben ik er ook.

**YolkNet** · 13/05/09 16:48

Ik maak altijd gebruik van deze pagina: http://blog.html.it/layoutgala/. Verschillende opties voor hetzelfde resultaat. Kun je kijken welke code je het beste bevalt.

**eirNetics** · 13/05/09 17:01

Probeer een <br style="clear:both"/> te zetten...

HTML Code:

    <div id="rechterkant">foto 2<br />foto 3<br />foto 4<br /></div>
  <br style="clear:both"/>
</div>

**gjtje** · 13/05/09 17:54

'k Zou niet absoluut positioneren maar floaten, dan hebben ze in ieder geval een hoogte.

**eirNetics** · 13/05/09 19:36

Oorspronkelijk geplaatst door gjtje

'k Zou niet absoluut positioneren maar floaten, dan hebben ze in ieder geval een hoogte.

Wat heeft floaten met hoogte te maken?...

**Framboos** · 14/05/09 09:54

Oorspronkelijk geplaatst door eirNetics

Probeer een <br style="clear:both"/> te zetten...

HTML Code:

    <div id="rechterkant">foto 2<br />foto 3<br />foto 4<br /></div>
  <br style="clear:both"/>
</div>

Geen verschil als ik dit gebruik. Achtergrond komt niet mee.

Dank je dinges2007 voor de link.

**eirNetics** · 14/05/09 11:37

Hier, ik heb je CSS wat opgeschoond, en ook floats gebruikt ipv position:absolute

Let wel, de <br style="clear: both" /> heb je nog wel nodig om de parent div naar benden te trekken

*ff snel getest in IE8 en FF3

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#wrapper {
	width:990px;
	margin: 0 auto;
}
#inhoud {
	width:990px;
	background: url(images/bg_inhoud.gif);
	background-color: #d19243;
}
#linkerkant {
	float: left;
	width:180px;
}	
#midden {
	float: left;
	width:560px;
}	
#rechterkant {
	float: left;
	width:250px;
}	
</style>
</head>
<body>
<div id="wrapper">
	<div id="inhoud">	
		<div id="linkerkant">foto 1</div>		
		<div id="midden">Titel<br />
		Tekst bla bla bla bla<br />
		Tekst bla bla bla bla<br />
		</div>		
		<div id="rechterkant">foto 2<br />foto 3<br />foto 4<br /></div>
		<br style="clear: both"/>
	</div>	
</div>	
</body>
</html>

**Framboos** · 14/05/09 12:02

Zo, dat ziet er goed uit! Dank je eirNetics!

Ja, ik merk het, als je die clear niet meeneemt dan gebeurt er niets. Daar zou ik echt nooit aan gedacht hebben dat je dat erbij moest zetten (ik begrijp eigenlijk nog steeds niet wat dat nou precies doet, maar het doet zijn werk

).

**YolkNet** · 14/05/09 14:08

Daarmee maak je een nieuwe div. Met "clear: both" zorg je ervoor dat er niks links van de div, maar ook niks aan de rechterkant mag staan. Dus hoe lang je tekst ook is, er komt altijd nog een (leeg) divje onder. De "hoofd-div" waarbinnen het clearboth-div valt zal hierdoor dus langer worden. Inclusief de opmaak dus.

**Framboos** · 14/05/09 14:37

Aha okee

Onderwerp Gereedschap

Toon

Onderwerp: css 3 kolommen, simpele vraag?

css 3 kolommen, simpele vraag?

Webhostingtalk.nl

Link met ons

Partners

Contact