Forum Moderators: not2easy
<body>
<div id="wrapper">
<div id="layoutbg">
<div id="topnavigation"><div id="topnavigationhome"><img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> Final Fantasy Rebirth</div><div id="topnavigationlinks"><img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> VII <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> VIII <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> IX <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> X <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> X-2 <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> XII <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> XIII <img src="assets/bullet.png" width="11" height="11" alt="Final Fantasy" /> Versus XIII</div></div>
<div id="banner"><img src="assets/banner.jpg" width="785" height="125" alt="Final Fantasy" /></div>
<div id="navigation"><img src="assets/navigation.png" width="149" height="27" alt="Final Fantasy" />
<div id="navigationtextholder"><h1>Coverage</h1>
<ul class="navigationlinks">
<li>Final Fantasy VII</li>
<li>Final Fantasy VIII</li>
<li>Final Fantasy IX</li>
<li>Final Fantasy X</li>
<li>Final Fantasy X-2</li>
<li>Final Fantasy XII</li>
<li>Final Fantasy XIII</li>
<li>Final Fantasy Versus XIII</li></ul>
<h1>Site Related</h1>
<ul class="navigationlinks">
<li>Home</li>
<li>Affiliation</li></ul>
<h1>Affiliates</h1>
<ul class="navigationlinks">
<li>Your Link Here?</li></ul>
</div></div>
<div id="contentarea"><img src="assets/content.png" width="97" height="27" alt="Final Fantasy" />
<div id="contenttextholder">
Content
</div></div>
<div id="footer"><div id="copyright">Website copyright Final Fantasy Rebirth © 2005-2011. No copyright infringement intended. FINAL FANTASY is a registered trademark of Square Enix Co., Ltd.</div></div>
</div>
</div>
</body>
@charset "utf-8";
/* CSS Document */
body { margin-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
background-image:url(assets/bg.gif);
}
h1 { background-image:url(assets/h1bg.gif);
background-repeat:no-repeat;
width:140px;
height:17px;
margin:0px;
text-indent:15px;
font-size:12px;
font-weight:bold;
}
ul.navigationlinks { list-style: none;
margin-left:-40px;
margin-top:0px;
margin-bottom:5px;
}
/* Layout Styles */
#wrapper { width: 795px;
margin: 0 auto;
}
#layoutbg { width:795px;
position:absolute;
background-color:#03080a; }
#topnavigation { width:785px;
height:24px;
border:1px #000000 solid;
background-image:url(assets/topnavigationbg.gif);
background-repeat:repeat-x;
background-position:top;
margin: 0 auto;
margin-top:5px;
margin-bottom:3px;
font-size:12px;
font-weight:bold;
position:relative;
}
#topnavigationhome { float:left;
height:24px;
margin-top:4px;
}
#topnavigationlinks { text-align:right;
float:right;
height:24px;
margin-top:4px;
}
#banner { width:785px;
height:125px;
border:1px #000000 solid;
margin: 0 auto;
margin-left:5px;
float:left;
}
#navigation { width:150px;
border:1px #000000 solid;
background-image:url(assets/navicontentbg.png);
background-repeat:repeat-x;
background-position:top;
background-color:#0a171d;
margin-top:3px;
margin-left:3px;
float:left;
}
#navigationtextholder { width:140px;
margin: 0 auto;
word-wrap: break-word;
}
#contentarea { width:629px;
border:1px #000000 solid;
background-image:url(assets/navicontentbg.png);
background-repeat:repeat-x;
background-position:top;
background-color:#0a171d;
margin-top:3px;
margin-left:3px;
margin-right:5px;
float:right;
}
#contenttextholder { width:619px;
margin: 0 auto;
word-wrap: break-word;
}
#footer { width:785px;
border:1px #000000 solid;
background-image:url(assets/footerbg.gif);
background-repeat:repeat-x;
background-position:top;
height:24px;
float:left;
margin: 0 auto;
margin-top:3px;
margin-bottom:5px;
position:relative;
}
#copyright { height:24px;
margin-top:4px;
text-align:center;
}
The navigation bar and the content bar don't extend to the bottom of the footer Div and I have no idea why.Without an explicit height they will expand to contain the content. If the content is too "short" to fill the space down to the footer, they won't expand that far.
... wrap both of them in a Div layer with height:500px; and set both the navigation Div and content Div to height:100%;. However this caused the text to overflow below the footer and outside of the layout, min-height didn't work either.An element with height:100% will be 100% the height of its parent. So if the parent was height:500px the child elements will take that for both height and min-height. Both nav and content are floated, which means they are removed from the normal flow - and that means they expand regardless of the other elements. What you saw is expected behaviour - although not what was wanted ;)
