1. Home
  2. Forums Index
  3. Browser Side / CSS 8:59 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Header Footer Content problems

         

tlflow

4:27 pm on Apr 20, 2007 (gmt 0)

10+ Year Member



OK, so I've been working on this for about 2 days now, and the fact that it would seem to be so simple is starting to drive me crazy!

Three problems:

(firefox) I'm trying to have 1 header and 1 footer on my page that goes all the way across (width: 100%, right?) and the page scroll up and down if need be. I dont know why but, I'm able to scroll left to right, and I dont want to.

(firefox) Under main I have two columns, sidenav and content. On IE 6 the columns display properly but on firefox the text wraps around over the side nav. I'm guessing firefox isnt detecting the height settings, maybe?

(IE 6) My footer is fine until I add more text. The more text I add, the further the footer is pushed down until eventually out of sight.

Here's my code:

<!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">

html, body { /* overflow: hidden; */ margin: 0; padding: 0; width: 100%; position: relative; }
#header { height: 160px; position: relative; top: 0; width: 100%; text-align: left; padding: 0 5%; color:#494242; font-size: 11px; line-height: 13px; font-family: arial, verdana, helvetica, sans-serif; font-variant: normal; font-style: normal; background-color: #F4F3F3; } */
#main { bottom: 20px; position: relative; left: 0; right: 0; top: 160px; }
#sidenav { height: 100%; background: #00f; float: left; width: 200px; }
#content { height: 100%; /* overflow: visible; */ }
#footer { height: 160px; position: relative; bottom: -10px; left: 0px; width: 100%; padding: 0px; margin: 0px auto; text-align: left; padding: 0 5%; padding-top: 20px; color:#494242; font-size: 11px; line-height: 13px; font-family: arial, verdana, helvetica, sans-serif; font-variant: normal; font-style: normal; background-image: url(images/footer.gif); background-position: 0px 0; background-repeat:no-repeat; background-color: #F4F3F3; }
</style>

<!--[if lt IE 7]>
<style type="text/css">
html { /* padding: 50px 0 20px; */ }
#main { bottom: auto; left: auto; right: auto; top: auto; height: 100%; position: static; }
</style> <![endif]-->

</head>
<body>

<div id="header">header</div>

<div id="main">
<div id="sidenav">sidenav</div>
<div id="content">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>

</div>
</div>

<div id="footer">

<a href="web_design_firm_information.htm">corporate info</a> &nbsp;¦&nbsp; <a href="design_portfolio.htm" class="subnavOn">portfolio</a> &nbsp;¦&nbsp; <a href="agency_solutions.htm">solutions</a> &nbsp;¦&nbsp; <a href="contact_web_design_firm.htm">contact us</a> &nbsp;¦&nbsp; <a href="index.htm">home</a><br>

All company names, product names logos included here may be registered trademarks or service<br>
marks of their respective owners.<br></br>

123 Main Street Charlotte NC 22222 &nbsp;-&nbsp; Call toll free +1.888.111.2222<br>
Copyright &copy; 2006-<span id="insertYear">2006</span> <a href="web_design_firm_sitemap.htm">My Company Name</a>. All Rights Reserved. <br>
<a href="privacy_policy.htm">Privacy Policy</a>

</div>

</body>
</html>

I said I was working on this for two days, but sadly this has been an ongoing battle for weeks now, I just came back to it recently.

If anyone could point me in the right direction, I'd greatly appreciate it!

tlflow

justgowithit

7:34 pm on Apr 20, 2007 (gmt 0)

10+ Year Member



I’m no css expert, but I think the issue here lies with your width and positioning declarations. By default, width of a block-level element will be 100% of the available space. Since your header, footer, and body are already 100% be default there’s no reason to declare this. Also, position: relative; top: 0; is redundant.

Using “position: relative” with a zero value is the same as default positioning. Read about position:relative [w3schools.com] here. The following is your original code with some adjustments that now produce the desired effect.


html, body { /* overflow: hidden; */ margin: 0; padding: 0; }
#header { height: 160px; text-align: left; padding: 0 5%; color:#494242; font-size: 11px; line-height: 13px; font-family: arial, verdana, helvetica, sans-serif; font-variant: normal; font-style: normal; background-color: #F4F3F3; } */
#main { bottom: 20px; position: relative; left: 0; right: 0; top: 160px; }
#sidenav { height: 100%; background: #00f; float: left; width: 200px; }
#content { height: 100%; /* overflow: visible; */ }
#footer { height: 160px; bottom: -10px; padding: 0px; margin: 0px auto; text-align: left; padding: 0 5%; padding-top: 20px; color:#494242; font-size: 11px; line-height: 13px; font-family: arial, verdana, helvetica, sans-serif; font-variant: normal; font-style: normal; background-image: url(images/footer.gif); background-position: 0px 0; background-repeat:no-repeat; background-color: #F4F3F3; }
</style>

Dabrowski

9:31 pm on Apr 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi tlflow, your code was very messy, so I've really just deleted most of it. I'm not going to explain every change as there was so much, just look at the corrected code and you'll work it out.

One point I will make is that you had an XHTML 1.0 STRICT DTD, but your markup was HTML? I noticed your BR tags were <br>, that's HTML. XHTML would be <br />. I've changed the DTD accordingly.

Your padding on footer was quite amusing. You had 'padding: 0;' (no padding), 'padding: 0 5%;' (0 top and bottom, 5% left and right), and 'padding-top: 20px' (padding 20px top). I decided it would be best to do 20px top and bottom, 5% left and right, it seemed like what you were trying to do.

I've also set the #header and #footer to use the same code to save space, and added an extra line for the footer image.

Here's the code, hope you have some good luck filling it in! ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">

* { margin: 0; padding: 0; border: 0; }

#header, #footer {
height: 120px; padding: 20px 5%;
font-size: 11px; line-height: 13px;
font-family: arial, verdana, helvetica, sans-serif;
color: #494242;
background: gainsboro;
}

#main { width: 100%; overflow: auto; }

#sidenav {
float: left;
width: 200px;
background: #00f;
}

#content { margin-left: 200px; }
#footer { background: gainsboro url(images/footer.gif) no-repeat; }

</style>

</head>
<body>

<div id="header">header</div>

<div id="main">
<div id="sidenav">sidenav</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
</div>

<div id="footer">
<a href="web_design_firm_information.htm">corporate info</a> &nbsp;¦&nbsp; <a href="design_portfolio.htm" class="subnavOn">portfolio</a> &nbsp;¦&nbsp; <a href="agency_solutions.htm">solutions</a> &nbsp;¦&nbsp; <a href="contact_web_design_firm.htm">contact us</a> &nbsp;¦&nbsp; <a href="index.htm">home</a><br>
All company names, product names logos included here may be registered trademarks or service<br>
marks of their respective owners.<br>
123 Main Street Charlotte NC 22222 &nbsp;-&nbsp; Call toll free +1.888.111.2222<br>
Copyright &copy; 2006-<span id="insertYear">2006</span> <a href="web_design_firm_sitemap.htm">My Company Name</a>. All Rights Reserved. <br>
<a href="privacy_policy.htm">Privacy Policy</a>
</div>

</body>
</html>

tlflow

5:21 am on Apr 21, 2007 (gmt 0)

10+ Year Member



Wow --- Thanks Dabrowski and justgowithit....

That came out perfect. I guess all those settings were kind of amusing (I suppose when you get deseperate enough just to see something change on the screen, you'll try anything AND EVERYTHING).

But everything works fine now. Thanks,

tlflow

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 8:59 am May 2, 2026