Div stretchen naar pagina

Status
Niet open voor verdere reacties.
E

Ewergreen

Gebruiker
Lid geworden
15 mrt 2008
Berichten
273
Hoe kan ik ervoor zorgen dat <div id="right"> altijd even hoog is als de pagina?

HTML:

HTML: 
<!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">
<head>
<title>T.A. Cook Statistics</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style type="text/css">
<!--
.style2 {font-size: 12px}
-->
</style>
</head>
<body>

<div id="wrap">

<div id="header">
<h1><a href="invitation.html">Header</a></h1>
<h2>Listening to you</h2>
</div>


<div class="left"> 

<div class="articles">
bla bla



</div>
</div>

<div class="right"> 

<h2>Menu</h2>
<ul>
<li><a href="invitation.html">stuff</a></li> 
<li><a href="morning_after.html">after</a></li> 
</ul>

</div>
<div style="clear: both;"> </div>



<div id="footer">footer
</div>
</div>

</body>
</html>

CSS:
Code: 
* {
    padding: 0;
    margin: 0;
} 

html {
height: 100%;
}

body {
height: 100%;
background: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: #aaa;
}

img { border: none; }
a { color: #97C4FF; text-decoration: none;}

#capital {
	color: #97C4FF;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;

}

a:hover { text-decoration: underline; color : #aaa; }

#wrap {
margin: 40px auto 0 auto;
width: 800px;
}

#standout {
background-color:#666666;
padding: 10px;
}

#header { 
border: 5px solid #222;
height: 100px;
background: #333;
}

#header h1 {
font-size: 26px;
font-weight: 100;
padding: 12px 0 5px 10px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header h1 a:hover {
color: #aaa;
text-decoration: none;
}
#header h2 {
color: #ccc;
font-size: 15px;
font-weight: 100;
padding: 0 0 0 11px;
letter-spacing: 1px;
line-height: 12px;
}

.style2 {
font-size: 12px;
}

#tabel {
border: medium #CCCCCC solid;
text-align: center;
}

#center {
text-align: center;
}




.left {
margin-top: 10px;
width: 570px;
float: left;
text-align: justify;
border: 5px solid #222;
padding: 10px;
background: #333;
}
.left h2 {
color: #FF4800;
font-size: 24px;
font-weight: 100;
padding : 10px 0 15px 0;
}

.left ul {
	padding: 15px;
}

.left ul a {
	color: #CCCCCC;
	}
	
.nolist{
	padding: 5px;
	list-style-image: none;
	list-style-type: none;	
}
.right {
margin-top: 10px;
width: 160px;
float: right;
border: 5px solid #222;
font-size: 12px;
padding: 10px;
background: #333;
}
.right ul {
list-style-type: square;
padding: 5px 10px 10px 20px;
color: #59799F;
}
.right h2 {
	height: 25px;
	font-size: 14px;
	color: #999999;
	line-height: 30px;
	background-color:#666666;
	width: 160px;
	text-indent: 5px;
}
.right a { text-decoration: none }

.right h3 {
	height: 20px;
	font-size: 12px;
	text-decoration: underline;
	color: #999999;
	line-height: 30px;
}

#footer {
margin-top: 10px;
text-align: center;
color: #eee;
font-size: 6px;
border: 5px solid #222;
padding: 10px;
background: #333;
}

.style2{
letter-spacing: 0px;
}

#slider {
	height: 600px;
	width: 570px;
	overflow: -moz-scrollbars-horizontal;
	overflow-x: auto;
	overflow-y: none;
	}
#login {
	background-color: #222;
	height: 25px;
	width: 100%;
	bottom: 0px;
	margin-top: 28px;
	}
	
#login input
{
	color: #999999;
	border: 1px solid #666666;
	margin-top: 5px;
	background-color: #666666;
}

#login submit
{
	color: #999999;
	border: 2px outset #CCCCCC;
	background-color: #CCCCCC;
} 	

#float
{
float: right;
}
 
Let wel op, dit werkt volgens de relatieve 100%-height manier. Dat wil zeggen dat je de .Right Div een height krijgt van 100%, maar zorg er dan wel voor dat de 'parents' (de omarmende elementen) ook een hoogte hebben van 100%. De 100% hoogte van die right div hangt dus af van de hoogte van de div die 'eromheen' zit, in jouw geval #wrap. Ook die moet dus een hoogte hebben van 100%. Op zijn beurt is het 'omarmende' element van #wrap: body. Ook de body moet je dus een hoogte geven van 100%.

De reden dat ik je dit vertel is dat ik zelf hier lang mee heb lopen stoeien voordat ik erachter kwam dat de parents ook een gespecificeerde hoogte moeten hebben. Als je goed het artikel leest dat janyep gepost heeft, moet het allemaal goedkomen.

-H
 
mijn advies: niet doen! is nergens voor nodig en geeft je alleen maar kopzorgen.
 
Hug0 zei:
Als iemand wil leren hoe ie dit voor elkaar krijgt dan kun je toch niet zomaar zeggen dat het niet nodig is? Dat laat ik geheel aan hem over.. Maar inderdaad, dit is wat lastiger dan de gemiddelde layout.
Klik om te vergroten...

Ben ik het helemaal met je eens. Persoonlijk ben ik van mening dat dit soort dingen te vaak gedaan worden en het eindresultaat niet onder doet voor een andere oplossing... Dus zeg dan vrij snel dat je het beter kunt laten... mijn ongezoute mening... ik zal er eventjes mee oppassen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan