Page is a not externally linkable
joshffr - 10:22 am on Jun 1, 2011 (gmt 0)
Hi, I'm pretty new to coding complete Div/CSS layouts and I'm having a bit of a problem at the moment. I'm trying to make a layout that looks like the following: [i232.photobucket.com...]
As you can see the left navigation bar and the content bar extend all the way down to the bottom of the footer Div. I've got this far coding it: [ffrebirth.com...]
The navigation bar and the content bar don't extend to the bottom of the footer Div and I have no idea why. My initial thought was to 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.
Here's the code and CSS:
<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>
CSS: @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;
}
Any ideas as to why it's not working properly? Thanks.