Problem with page width and header/footer overlap

Question

jaidanwolf 0 Newbie Poster

18 Years Ago

Hi guys, I put this site together for a personal project I've got in progress and am having some issues with the header and footer.

My resolution is 1280 x 800, and when my browser is full screen, the page looks perfect.

However, if I make the browser window smaller, two problematic things happen...one, the header squishes to accomodate the smaller window and overlaps the main content. Two, the footer text gets cut off on both ends and also overlaps the main body scrollbar.

If I view the page on a larger screen, there is a black space between the header/footer and the content scrollbar.

So my question is, is there a way to set a fixed size for the page, so that it stays the same no matter what sized window it's being viewed in (ie. if the browser window is small, then there would be a standard horizontal scrollbar on the bottom as opposed to the page resizing)? I'd basically just like to have the header and footer exactly lined up with the edge of the main content scrollbar at all times, regardless of screen resolution/browser window size.

Everything but the header and footer seems fine. If anyone can help me fix this issue, I'd really, really appreciate it.

The page:

Page 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Xilon Project</title>
<link rel="stylesheet" href="xilon.css" type="text/css" />
</head>


<body>
<div id="head">
<div id="pad1"></div>
The Xilon Project</div>


<div id="foot">
<div id="pad3"></div>
<br>
Do not use anything from this site without the express permission of the owners.<BR>
All conceptual elements belong to and are copyright to Reese Nanavati. All artwork belongs to and is copyright to the individual 

artists.</div>

<div id="left">
<div class="pad2"></div>
<!--#include virtual="menu.inc"--></div>

<div id="content">
<div class="pad2"></div>
<BR>
<h2 class="title">&nbsp; Welcome to the Aeradisphere</h2>

<p>This is a collaborative online exhibition that displays artwork depicting a fictional region of the universe called the Xilon 
System. The images here were created by a range of artists, based on detailed descriptions of this imaginative corner of the 
sky. &nbsp;&nbsp;<a href="about.shtml">Read More</a></p>

</body>
</html>

The CSS code

/* BASIC INFO */

html {
height:100%; 
max-height:100%;  
padding:0; 
margin:0; 
border:0; 
font-size:76%; 
font-family: Georgia 
background:#fff url(.jpg) -18px 0 no-repeat; 
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ }


/* GENERAL LAYOUT */

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:165px; position:relative; z-index:3; background: #000000; color: #ffffff;}
#head {position:fixed; margin:0; top:0; right:13px; display:block; width:100%; height:100px; background:url(images/space.jpg) #ddd; font-size:6em; z-index:5; color:#ffffff; font-family: Georgia;}
#foot {position:fixed; margin:0; bottom:0px; right:12px; left:85px; display:block; width:92.3%; height:50px; background: #660000; color:#ffffff; text-align:center; font-size:10; z-index:4; font-family: verdana;}


/* TITLES */

h1, h2, h3 {
	font-weight: normal;
	color: CBA61A;
}

h1 {
	letter-spacing: -2px;
	font-size: 3em;
}

h2 {
	letter-spacing: -1px;
	font-size: 2em;
	color: #CBA61A;
}

h3 {
	font-size: 1em;
}

p, ul, ol {
	line-height: 150%;
}

.title {
	margin: 0;
	border-bottom: 2px solid #0F0F0F;
}

body {
	margin: 0;
	padding: 0;
	background: #000000;
	font-size: 13px;
	color: #ffffff
}

body, th, td, input, textarea, select, option {
	font-family: Georgia;
}


/* LINKS WITHIN BODY */

a {text-decoration: none; color: #3AA0B9;}
a:visited {text-decoration: none; color: #3AA0B9;}
a:active {text-decoration: none; color: #3AA0B9;}
a:hover {text-decoration: overline underline; color: #660000;}

  p.link a:hover {background-color: #2B2E21;color:#fff;}
  p.link a:link span{display: none;}
  p.link a:visited span{display: none;}
  p.link a:hover span {
  position: absolute;
  margin:15px 0px 0px 20px;
  background-color: #ffffff;
  max-width:300;
  padding: 2px 10px 2px 10px;
  border: 5px solid #660000;
  font: normal 16px verdana;
  color: #000000;
  text-align:left;
  display: block;}


/* IMAGE GALLERY STRUCTURE AND HOVER CODES */

div.img
{
  margin: 0px;
  border: 1px solid #3AA0B9;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	
div.img img
{
  display: inline;
  margin: 0px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #660000;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 0px;
}

img.floatLeft { 
	float: left; 
	margin: 4px; 
}
img.floatRight { 
	float: right; 
	margin: 4px; 
}



/* POSITION */

#left {position:fixed; left:0; top:0; height:100%; width:150px; background:url(images/stars.gif) #aaa; background-position:0 100px;; font-size:1em; color:#fff;z-index:4;}

* html #head, * html #foot,* html #left {position:absolute;}

#pad1 {display:block; width:175px; height:100px; float:left;}
#pad3 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:100px; color: #ffffff;}

#content p {padding:5px;}



/* SIDE MENU */

#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:right; height:360px; background:url(images/stars.gif) #000000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#000000 url(slide/slide_0.gif) no-repeat;}

#menu li.sub {background:#000000 url(slide/slide_0.gif) no-repeat;}

#menu li, #menu li a {display:block; color:#ffffff; font-family:Arial; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}

#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#menu :hover {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#menu :hover > a {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#000000;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #660000;}

#menu :hover ul li, #menu :hover ul li a {background:#000000; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #000000 url(slide/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#660000; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}

#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#000000;}
#menu :hover ul :hover ul :hover ul li {background:#660000; z-index:500;}

#menu :hover ul :hover ul li.fly a {background: #000000  url(slide/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#660000; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#000000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}

#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#000000;}

#menu :hover ul :hover ul :hover ul :hover {background:#660000; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}

html-css web-design

3 Contributors
2 Replies
226 Views
14 Hours Discussion Span
Latest Post 18 Years Ago Latest Post by sreein1986

Dani AI

Generated 7 Months Ago

Quick diagnosis and recommended fix

The overlap is caused by three things working against each other: header/footer are positioned relative to the viewport while the main column is an inner scroll container, several elements use percentage widths and manual left/right offsets, and the page disables normal viewport scrollbars (html/body overflow hidden). That combination makes the header "shrink" to the viewport size and the footer clip or sit on top of the content scrollbar. was right that switching to a fixed-width wrapper will make alignment predictable; 's note about alignment helps, but aligning alone won't fix the overlap until the fixed/overflow behaviour is addressed.

Concrete, ordered steps

Restore normal viewport scrolling: remove html/body overflow:hidden so the browser can provide horizontal and vertical scrollbars.
Create a single fixed-width, centered wrapper (pixel width) and move header, content, left nav and footer inside it. This yields a stable layout that produces a bottom horizontal scrollbar when the window is narrower than the wrapper.
Keep header/footer in normal flow (not fixed) if they must line up with content. If a sticky header/footer is required, give them the wrapper width and center them (left:50% with transform:translateX(-50%) or explicit left value).
Avoid an inner scrolling container unless its height is explicitly computed. If inner scrolling is needed, set content height with calc() or vh and add bottom padding equal to the footer height so the footer does not cover the scrollbar.

Minimal example

<!-- HTML -->
<div id="site">
  <header id="head">site title</header>
  <aside id="left">nav</aside>
  <main id="content">main content</main>
  <footer id="foot">footer text</footer>
</div>

<!-- CSS -->
html,body { margin:0; padding:0; overflow:auto; }
#site { width:980px; margin:0 auto; position:relative; }
#left { float:left; width:150px; }
#content { margin-left:150px; padding:20px; }
#head,#foot { width:100%; position:static; }

Notes and checks

Add temporary borders to header/content/footer to visualize boxes while testing. If a sticky header/footer is required, use the centered-width technique shown above. Avoid chaining height:100% across many ancestors unless the height math is deliberate — that is a common source of unexpected internal scrollbars and overlap.

All 2 Replies

macneato 29 Posting Pro in Training

18 Years Ago

Hi Wolf,

What your main issue is, that when designing, you went for a liquid layout.

What i would suggest. Add a container and set the width. You would probably have to re-work a few css classes and graphics. But it will do the trick.

Regards

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sreein1986 0 Posting Whiz · Answer 1 · 2008-06-17T17:17:34+00:00

Hi,

First you didn't give align for div tags. so, pls give alignment and mention div tag size after then check

Problem with page width and header/footer overlap

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers