Archief - 3 Divs, 1 onbekende breedte

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
p

passero

Legacy Member
Voor een portal kunnen we layouts schrijven. Die layouts zijn lege pagina's met gewoon enkele divs in gedefinieerd.
Nu, ik wil een layout maken waarbij je 3 divs hebt op 1 rij. De eerste 200px breed, de middelste onbekend en de 3de ook 200px. Samen moeten ze wel 100% van de browser hebben.

HTML: 
<div style="width:200px;display:inline;">Linker div</div>
<div style="display:inline;">Midden div</div>
<div style="width:200px;display:inline;">Rechter div</div>

Zo iets werkt maar dan is de middenste afhankelijk van de content en hij moet een grote hebben die gewoon schermvullend is.

Nu, ik ben developer en qua css ken ik wel de basis maar blijkbaar zo goed ook weer niet :)
Iemand die me op de goeie weg kan helpen om dit te doen?
d

demon326

Legacy Member
passero zei:
Voor een portal kunnen we layouts schrijven. Die layouts zijn lege pagina's met gewoon enkele divs in gedefinieerd.
Nu, ik wil een layout maken waarbij je 3 divs hebt op 1 rij. De eerste 200px breed, de middelste onbekend en de 3de ook 200px. Samen moeten ze wel 100% van de browser hebben.

HTML: 
<div style="width:200px;display:inline;">Linker div</div>
<div style="display:inline;">Midden div</div>
<div style="width:200px;display:inline;">Rechter div</div>

Zo iets werkt maar dan is de middenste afhankelijk van de content en hij moet een grote hebben die gewoon schermvullend is.

Nu, ik ben developer en qua css ken ik wel de basis maar blijkbaar zo goed ook weer niet :)
Iemand die me op de goeie weg kan helpen om dit te doen?
Klik om te vergroten...

Helpt dit mss; Three column liquid layout | Max Design ? Daar kunt ge al wat mee spelen...:p
C

Curahee Q

Legacy Member
Kan je niet gewoon je middelste div een width van 100% geven? Al lijkt die link van benny wel hetgeen te zijn dat je zoekt.
A

Albireo

Legacy Member
Dit is het simpelste dat ik kon bedenken. Het uitgangpunt is dat een div (en elk block-element) standaard altijd even breed is als het element waarin het vervat zit, dus dat is perfect voor je middenkolom. Vervolgens heb ik left- en right-margins ingesteld zodanig dat daar plaats komt voor je linker- en rechterkolom die je daar kunt plaatsen met float. Let wel dat je rechterkolom in je html-code voor de middenkolom komt.

CSS:
Code: 
			#links,#rechts {
				width: 200px;
				background-color: #CCCCCC;
			}
			#links {
				float: left;
			}
			#rechts {
				float: right;
			}
			#midden {
				margin-left: 200px;
				margin-right: 200px;
				background-color: #666666;
			}
HTML:
Code: 
		<div id="links">links</div>
		<div id="rechts">rechts</div>
		<div id="midden">midden</div>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan