I’m trying to make a CSS fixed width, two column, header and footer layout.

Question

0

Asked: May 23, 20262026-05-23T01:31:57+00:00 2026-05-23T01:31:57+00:00

I’m trying to make a CSS fixed width, two column, header and footer layout.

0

I’m trying to make a CSS fixed width, two column, header and footer layout.

So far I’ve managed to get this far: http://www.ffrebirth.com/, however the problem is that I can’t get the side bar and content area to extend to 100% of the surrounding layer. What I want it to do can be seen in this image:

http://i232.photobucket.com/albums/ee200/joshebowe/Layout.png

My initial thought would be to set #navigation and #contentarea to height:100%; and create a surrounding div. If you look at the code below you’ll see #innerwrapper and set it to min-height:500px. This however did nothing and the min-height wouldn’t work, so I set it to height:500px; This got the desired effect, however, whenever the content overflowed over 500px it wouldn’t remain inside the layout and would continue to flow over the footer.

The code I have so far is this on the index.php:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Final Fantasy Rebirth</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="wrapper">
<div id="layoutbg">
<div id="topnavigation"><div id="topnavigationhome"><img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Home">Final Fantasy Rebirth</a></div><div id="topnavigationlinks"><img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy VII">VII</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy VIII">VIII</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy IX">IX</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy X">X</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy X-2">X-2</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy XII">XII</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy XIII">XIII</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy XIII-2">XIII-2</a> <img src="assets/bullet.png" alt="Final Fantasy" /> <a href="" target="_self" title="Final Fantasy Versus XIII">Versus XIII</a></div></div>
<div id="banner"><img src="assets/banner.jpg" width="785" height="125" alt="Final Fantasy" /></div>
<div id="innerwrapper"><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><a href="" target="_self" title="Final Fantasy VII">Final Fantasy VII</a></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 XIII-2</li>
<li>Final Fantasy Versus XIII</li></ul>

<h1>Multimedia</h1>
<ul class="navigationlinks">
<li>Full Motion Videos</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">
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<h1>Test Header</h1>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
</div></div></div>
<div id="footer"><div id="copyright">Website copyright Final Fantasy Rebirth &copy; 2005-2011. No copyright infringement intended. FINAL FANTASY is a registered trademark of Square Enix Co., Ltd.</div></div>
</div></div>
</body>
</html>

And the CSS is:

@charset "utf-8";
/* CSS Document */

body { margin:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#c1c3c3;
background-image:url(assets/bg.gif);
}

/* Text Styles */
a:link,
a:active,
a:visited
{ color: #FFFFFF;
text-decoration: none;
}

a:hover { color: #4f7785;
text-decoration: none;
}

h1 { font-size:12px;
font-weight:bold;
margin: 0px;
padding-top:1px; }

p { font-size:11px;
margin-top: 0px;
margin-bottom:5px;
}

#navigationtextholder 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;
color:#FFFFFF;
}

ul.navigationlinks { list-style: none;
margin-left:-40px;
margin-top:0px;
margin-bottom:5px;
}

/* Layout Styles */
#wrapper { width: 797px;
margin: 0 auto;
}

#layoutbg { width:797px;
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-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:3px;
font-size:12px;
font-weight:bold;
}

#topnavigation img { margin-bottom:-1px;
}

#topnavigationhome { float:left;
height:24px;
margin-left:5px;
margin-top:5px;
}

#topnavigationlinks { text-align:right;
float:right;
height:24px;
margin-right:5px;
margin-top:5px;
}

#banner { width:785px;
height:125px;
border:1px #000000 solid;
margin-left:5px;
margin-right:5px;
float:left;
}

#innerwrapper {
}

#navigation { width:150px;
height:100%;
border:1px #000000 solid;
background-image:url(assets/navicontentbg.png);
background-repeat:repeat-x;
background-position:top;
background-color:#0a171d;
margin-left:5px;
float:left;
}

#navigationtextholder { width:140px;
margin: 0 auto;
word-wrap: break-word;
}

#contentarea { width:629px;
height:100%;
border:1px #000000 solid;
background-image:url(assets/navicontentbg.png);
background-repeat:repeat-x;
background-position:top;
background-color:#0a171d;
margin-left:161px;
margin-top:134px;
}

#contenttextholder { width:619px;
margin: 0 auto;
padding-left:8px;
padding-right:8px;
padding-bottom:5px;
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-left:5px;
margin-right:5px;
margin-top:3px;
margin-bottom:5px;
}

#copyright { height:24px;
margin-top:4px;
text-align:center;
}

I’ve tried doing it several ways, such as setting the height of everything to 100%, however this didn’t work as whenever the browser wasn’t full screen the text would overflow outside of the layout, so I’ve removed all the height:100%;.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-23T01:31:58+00:00

You might want to use the faux column technique or equal height columns.

100% (or any percetage) height can only refer to the set height of the parent – if the parent’s height is not explicitly set, then the percentage heights will default to “auto”.

There are also javascript workarounds but I’d go for the above solutions.

Possible duplicate of:
How to Force Child Div to 100% of Parent’s Div Without Specifying Parent’s Height?

P.S. Try to keep your question neat and report only the essential next time.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I’m trying to make a CSS fixed width, two column, header and footer layout.

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply