Thomqa
Gebruiker
- Lid geworden
- 6 mei 2010
- Berichten
- 147
Best helpmij-ers,
Ik probeer nu al een tijdje deze div elementen naast elkaar te krijgen, maar de positie van het vak verandert aan de hand van de inhoud van vak links ervan.
hoe los ik dit op?
CSS
Html
Ik probeer nu al een tijdje deze div elementen naast elkaar te krijgen, maar de positie van het vak verandert aan de hand van de inhoud van vak links ervan.
hoe los ik dit op?
CSS
Code:
div.basis {
margin-left:auto;
margin-right:auto;
position:relative;
top:20px;
width:900px;
background-color:red;
height:100%;
}
div.top {
width:900px;
}
div.left_border {
float:left;
position:relative;
width:200px;
background-color:white;
}
div.menu {
position:relative;
left:200px;
top:-4px;
background-color:yellow;
width:200px;
}
div.tekstvak {
position:relative;
top:-536px;
left:400px;
background-color:orange;
}
div.bottom {
width:900px;
position:relative;
background-color:black;
}
Code:
<head>
<title>basisvorm</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="opmaak.css" />
</head>
<body>
<div class="basis">
<div class="top">
<img src="afbeeldingen/HEADER.jpg" width="900px" height="100px">
</div>
<div class="left_border">
<p>class=left_border</p>
<p>meer tekst<p>
<p>meer tekst<p>
<p>meer tekst<p>
<p>meer tekst<p><p>meer tekst<p><p>meer tekst<p><p>meer tekst<p><p>meer tekst<p>
<p>wanneer je hier tekst bij doet gaan de vakken rechts van dit vak naar beneden terwijl zij gewoon op hun plaats moeten blijven.</p>
</div>
<div class="menu">
<p> hier komt menu</p>
<p>meer tekst<p>
<p>meer tekst<p>
<p>meer tekst<p>
<p>wanneer je hier tekst bij doet gaan de vakken rechts van dit vak naar beneden terwijl zij gewoon op hun plaats moeten blijven.</p>
</div>
<div class="tekstvak">
<p> hier komt de tekst </p>
<p>meer tekst<p>
<p>meer tekst<p>
<p>meer tekst<p>
<p>meer tekst<p>
<p>ik moet nu bij elke verandering de top:---px; aanpassen.</p>
</div>
<div class="bottom">
<p> hier komt de onderkant</p>
</div>
<p> hallo allemaal </p>
</div>
</body>
</html>
