In onderstaande voorbeeld wil ik het rechter blok "Blok D" vertikaal uitlijnen zodat dit aan de onderkant op lijn staat met de onderkant van de linker kolom.
Helaas heb ik de html-tags een beetje moeten slopen om 'm duidelijk zichtbaar te krijgen in het code-block 
Hoe krijg ik dit voor elkaar?
En trouwens, waarom zie ik de border van de main_container niet als een groene border rondom de linker en rechter kolom, maar als een lege box bovenaan?
[edit]
Toevoeging: indien de content in de rechter kolom meer is dan in de linker kolom, dan moet het Blok D netjes tegen de onderkant van Blok C komen.
[/edit]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
< head>
< meta http-equiv="content-type" content="text/html;charset=utf-8" />
< title>test< /title>
< style type="text/css">
#main_container {
width: 310px;
border: 1px solid #0f0;
}
#left {
float: left;
width: 200px;
border: 1px solid #f00;
}
#right {
float: right;
width: 100px;
border: 1px solid #f00;
}
.left {
width: 180px;
border: 1px solid #f0f;
}
.right {
width: 80px;
border: 1px solid #0ff;
}
.bottom {
/* hoe dit item aan tegen de onderkant van de main_container te plakken??? */
}
< /style>
< /head>
< body>
< div id="main_container">
< div id="left">
< div class="left">Blok 1< /div>
< div class="left">Blok 2< /div>
< div class="left">Blok 3< /div>
< div class="left">Blok 4 asdg as dg asg as gads g sadgas dg as g sadg asg as g asdg asg asdg as dg asdg ga g as< /div>
< /div>
< div id="right">
< div class="right">Blok A< /div>
< div class="right">Blok B< /div>
< div class="right">Blok C< /div>
< div class="right bottom">Blok D< /div>
< /div>
< /div>
< /body>
< /html>
(Bewerkt door ettepet om 10:29, 24-12-2008)
Gast
