[DZM]TheOne
Legacy Member
Na heel wat artikels en tutorials over css uitgespit te hebben kom ik met deze vraag die me parten speelt:
hoe kan ik ervoor zorgen dat de randen van m'n kolommen tot onderaan komen, onafhankelijk van welk blok het langste is
voorbeeld waar het wél goed zit: http://brunovermeeren.be/aspCalender.asp
voorbeeld waar het fout gaat: http://brunovermeeren.be/aspCalender.asp?i=148
relevante code:
xhtml:
css main:
css secondary:
css tertiary:
hoe kan ik ervoor zorgen dat de randen van m'n kolommen tot onderaan komen, onafhankelijk van welk blok het langste is
voorbeeld waar het wél goed zit: http://brunovermeeren.be/aspCalender.asp
voorbeeld waar het fout gaat: http://brunovermeeren.be/aspCalender.asp?i=148
relevante code:
xhtml:
Code:
<div id="header">header</div>
<div id="navcontainer">navigatie</div>
<div class="divider">horizontale lijn</div>
<div id="secondary">linker navigatie</div>
[B]<div id="main">inhoud waar de betreffende borders ingesteld worden, dus de "middelste kolom"</div>[/B]
<div class="divider">horizontale lijn</div>
<div id="tertiary">opvulling</div>
<div id="footer">footer</div>
Code:
#main
{
float: left;
width: 60%;
height: auto;
min-height: 20em;
line-height: 110%;
padding-top: 1em;
padding-right-value: 1em;
padding-bottom: 1em;
padding-left-value: 1em;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
text-align: justify;
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
-x-background-x-position: 0%;
-x-background-y-position: 0%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
color: rgb(53, 68, 99);
border-right-width: 20px;
border-right-style: double;
border-right-color: rgb(53, 68, 99);
border-left-width: 7px;
border-left-style: double;
border-left-color: rgb(53, 68, 73);
}
Code:
#secondary
{
float: left;
padding-top: 1em;
padding-right-value: 1em;
padding-bottom: 1em;
padding-left-value: 1em;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
margin-top: 0em;
margin-right-value: 0em;
margin-bottom: 0em;
margin-left-value: 0em;
margin-left-ltr-source: physical;
margin-left-rtl-source: physical;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
text-align: left;
width: 12em;
}
Code:
#tertiary
{
float:right;
width:12em;
padding:1em;
margin:0em;
text-align:center;
display:none;
}