Hej udvikler
Jeg sidder og er ved at kode en side og er løbet ind i et problem. Problemet kan ses her: www.thewilson.dk/alanya . Problemet er at boksen til højre, kaldet secondaryContent, ikke har en height der dækker helt ned til footeren. Jeg har prøvet med height: 100% og height: auto, men det virker ikke. Jeg ved der er en måde at gøre det på, men kan ikke huske hvordan. Nogen der kender tricket?
Koden til siden kan ses her:
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Infoside om Alanya-rejse</title>
<link rel="stylesheet" type="text/css" media="screen" href="style/default.css" />
</head>
<body>
<div id="wrapper">
<div id="logo">
<a href="index.htm"><img src="images/logo.jpg" alt="logo" /></a>
</div> <!-- end wrapper -->
<ul id="navigation">
<li><a href="#">Forside</a></li>
<li><a href="#">Destination</a></li>
<li><a href="#">Rejseafgange</a></li>
<li><a href="#">Økonomi</a></li>
<li><a href="#">Stuff to know</a></li>
</ul>
<div id="content">
<div id="primaryContent">
<h3>Rejsen bookes</h3>
<p>
Ja blablallbse seogjesojseojsefojesfjsefojeofjsefojafowapfawpofjawpfojwapfowafpojawfpwaf
waopfjwa wpaofjawp fwabwaifwa uawfwao wafpowaj auwfwufwa iowfawoijfaw uwafwouawf
ieuahfwaou waf jaiowfwaiof jawofijwaf oijwafoiajw oiawfoijawfo oaiwfoiajwfja oijawfowijaw oij
oiwajfowaij oiwjafoij oiviowfwa paowkdwpaoi noidaowid poioizs opjdwapoj opjawdpj pojpjo
awpwahf pawpojdwa ouwbuwac powajdpojwa pojawdpoj pojcwapopajw opjawpojdw.
</p>
<h3>Rejsen bookes</h3>
<p>
Ja blablallbse seogjesojseojsefojesfjsefojeofjsefojafowapfawpofjawpfojwapfowafpojawfpwaf
waopfjwa wpaofjawp fwabwaifwa uawfwao wafpowaj auwfwufwa iowfawoijfaw uwafwouawf
ieuahfwaou waf jaiowfwaiof jawofijwaf oijwafoiajw oiawfoijawfo oaiwfoiajwfja oijawfowijaw oij
oiwajfowaij oiwjafoij oiviowfwa paowkdwpaoi noidaowid poioizs opjdwapoj opjawdpj pojpjo
awpwahf pawpojdwa ouwbuwac powajdpojwa pojawdpoj pojcwapopajw opjawpojdw.
</p>
<h3>Rejsen bookes</h3>
<p>
Ja blablallbse seogjesojseojsefojesfjsefojeofjsefojafowapfawpofjawpfojwapfowafpojawfpwaf
waopfjwa wpaofjawp fwabwaifwa uawfwao wafpowaj auwfwufwa iowfawoijfaw uwafwouawf
ieuahfwaou waf jaiowfwaiof jawofijwaf oijwafoiajw oiawfoijawfo oaiwfoiajwfja oijawfowijaw oij
oiwajfowaij oiwjafoij oiviowfwa paowkdwpaoi noidaowid poioizs opjdwapoj opjawdpj pojpjo
awpwahf pawpojdwa ouwbuwac powajdpojwa pojawdpoj pojcwapopajw opjawpojdw.
</p>
</div> <!-- end primaryContent -->
<div id="secondaryContent">
<a href="#" class="thumbnail" target="_blank"><img src="images/thumb_1.jpg" alt="thumbnail" /></a>
<a href="#" class="thumbnail" target="_blank"><img src="images/thumb_2.jpg" alt="thumbnail" /></a>
<a href="#" class="thumbnail" target="_blank"><img src="images/thumb_3.jpg" alt="thumbnail" /></a>
<a href="#" class="thumbnail" target="_blank"><img src="images/thumb_4.jpg" alt="thumbnail" /></a>
<a href="#" class="thumbnail" target="_blank"><img src="images/thumb_5.jpg" alt="thumbnail" /></a>
<a href="#" class="thumbnail" target="_blank"><img src="images/thumb_6.jpg" alt="thumbnail" /></a>
</div> <!-- end secondaryContent -->
</div> <!-- end content -->
<div id="footer">
All rights reserved - Jesper Wilson
</div> <!-- end footer -->
</div> <!-- end wrapper -->
</body>
</html>
default.css
/********* RESET **********/
*
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
/********* GENERAL *********/
html
{
background: #dbd5d5 url(../images/bg_slice.jpg) repeat-x;
font-family: arial, helvetica, sans-serif;
color: #e6e6e6;
}
h3
{
font-size: 18px;
}
p
{
font-size: 12px;
}
/********* CENTERING *********/
#wrapper
{
width: 800px;
margin: 100px auto 50px auto;
text-align: left;
}
body
{
text-align: center;
}
/********* NAVIGATION *********/
ul#navigation
{
list-style-type: none;
background: url(../images/nav_slice.gif) repeat-x;
float: left;
width: 100%;
border-top: 1px solid white;
border-bottom: 1px solid white;
height: 29px;
}
ul#navigation li
{
display: inline;
}
ul#navigation a
{
display: block;
float: left;
padding: .4em 20px 0 26px;
color: #e6e6e6;
text-decoration: none;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
}
ul#navigation a:hover
{
text-decoration: underline;
}
/********** CONTENT ***********/
#primaryContent
{
background: #424242;
float: left;
width: 535px;
border-right: 1px solid white;
padding-bottom: 20px;
}
#primaryContent p
{
padding: 4px 23px 0 26px;
}
#primaryContent h3
{
padding: 14px 23px 0 26px;
}
#secondaryContent
{
background: #696969;
float: left;
width: 264px;
height: 100%;
}
#footer
{
clear: both;
height: 29px;
background: url(../images/nav_slice.gif) repeat-x;
text-align: center;
border-top: 1px solid white;
font-size: 12px;
padding: .45em;
}