CSS automatisch mee groeien en border laten werken onderaan
Maar zoals je kan zien op deze voorbeeld website is de onderkant van de div nu niet met een border. Op welke manier kan ik het voor elkaar krijgen dat de border aansluit en dat de pagina lang genoeg is voor de tekst die er in zit (en dat dus alle kolommen mee groeien).
Ik heb nu de volgende codes gebruikt:
Mijn CSS:
Quote:
#container {
text-align : left;
margin : 0 auto;
width : 1150px;
height: 100%;
margin-left:auto;
margin-right:auto;
padding-top:0;
background : #ffffff;
overflow: hidden;
}
#banner {
clear:both;
margin-left:20px;
position:relative;
overflow: hidden;
border: 1px solid black;
width: 1110px;
height: 200px;
margin-bottom: 14px;
}
#left {
background-color: #fff;
float:left;
height:200px;
position:relative;
width:210px;
}
#middle {
float:left;
background-color: #fff;
height:200px;
position:relative;
width:680px;
}
#right {
float:right;
width: 220px;
background-color: #fff;
height:200px;
}
#midden {
clear:both;
margin-right:0;
position:relative;
overflow: hidden;
}
#links {
border: 1px solid black;
background-color: #ffff;
float:left;
min-height:800px;
position:relative;
width:200px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 32767px;
margin-bottom: -32747px;
margin-left: 20px;
margin-right: 14px;
}
#inhoud {
border:1px solid black;
float:left;
background-color: #ffff;
min-height:800px;
position:relative;
width:638px;
padding-bottom: 32767px;
padding-left: 10px;
margin-bottom: -32747px;
}
#rechts {
float:right;
width: 220px;
margin-left: 14px;
margin-right: 18px;
background-color: #fff;
border: 1px solid black;
min-height:800px;
padding-bottom: 32767px;
margin-bottom: -32747px;
}
#footer {
background-color: #fff;
clear:both;
color:#000000;
font-size:12px;
margin-top: 20px;
height:100px;
width: 1110px;
position:relative;
text-align:center;
margin-left: 20px;
border: solid black;
border-width: 1px;
}
text-align : left;
margin : 0 auto;
width : 1150px;
height: 100%;
margin-left:auto;
margin-right:auto;
padding-top:0;
background : #ffffff;
overflow: hidden;
}
#banner {
clear:both;
margin-left:20px;
position:relative;
overflow: hidden;
border: 1px solid black;
width: 1110px;
height: 200px;
margin-bottom: 14px;
}
#left {
background-color: #fff;
float:left;
height:200px;
position:relative;
width:210px;
}
#middle {
float:left;
background-color: #fff;
height:200px;
position:relative;
width:680px;
}
#right {
float:right;
width: 220px;
background-color: #fff;
height:200px;
}
#midden {
clear:both;
margin-right:0;
position:relative;
overflow: hidden;
}
#links {
border: 1px solid black;
background-color: #ffff;
float:left;
min-height:800px;
position:relative;
width:200px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 32767px;
margin-bottom: -32747px;
margin-left: 20px;
margin-right: 14px;
}
#inhoud {
border:1px solid black;
float:left;
background-color: #ffff;
min-height:800px;
position:relative;
width:638px;
padding-bottom: 32767px;
padding-left: 10px;
margin-bottom: -32747px;
}
#rechts {
float:right;
width: 220px;
margin-left: 14px;
margin-right: 18px;
background-color: #fff;
border: 1px solid black;
min-height:800px;
padding-bottom: 32767px;
margin-bottom: -32747px;
}
#footer {
background-color: #fff;
clear:both;
color:#000000;
font-size:12px;
margin-top: 20px;
height:100px;
width: 1110px;
position:relative;
text-align:center;
margin-left: 20px;
border: solid black;
border-width: 1px;
}
en de indeling:
Quote:
<div id="container">
<div id="banner">
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</div>
<div id="midden">
<div id="links">
</div>
<div id="rechts">
</div>
<div id="inhoud">
</div>
</div>
<div id="footer">
</div>
</div>
<div id="banner">
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</div>
<div id="midden">
<div id="links">
</div>
<div id="rechts">
</div>
<div id="inhoud">
</div>
</div>
<div id="footer">
</div>
</div>
Als er iets nog niet duidelijk is vraag het dan,
Alvast bedankt,
Matthijs
Matthijs Thoolen op 28/05/2011 15:32:34:
de onderkant van de div nu niet met een border. Op welke manier kan ik het voor elkaar krijgen dat de border aansluit en dat de pagina lang genoeg is voor de tekst die er in zit (en dat dus alle kolommen mee groeien).
Doordat je een min-height van 800px gebruikt, valt de onderkant van je kolommen weg. Als je dat aanpast (voorbeeld 80px) zie je dat er netjes aan de onderkant een border zit. In de rechterkolom zie ik table staan; is dat om te testen?
Mogelijk dat je hier http://www.code-sucks.com/css%20layouts/faux-css-layouts/ wat aan hebt.
als ik de min-height weg neem dan betekend het dat die niet meer automatisch groter wordt door de inhoud die er in komt te staan toch? Want dat is juist de bedoeling dat die mee groeit met de inhoud die er in wordt gezet.
In de rechterkolom staat inderdaad een table maar dat is voor iets wat daar in staat.
Matthijs