Need help in positioning main content and footer div containers [Archive]

FishMonger

10-12-2007, 06:02 AM

I'm reworking my email administration site to use div containers instead of iframes, but I'm not very skilled in css so I'm looking for some assistance in fixing the positioning.

It's a fairly basic setup. The main div container sets the height, width (scaled for 1024x768) and centers the page. The other 4 main div containers are the header, horizontal nav bar, main content, and footer which are all also centered and layered in that order.

The problem is with the positioning of the main content container and the footer and to prevent vertical scrolling of the main page container. The footer needs to be set at the absolute bottom and the height of the main content div needs to be fluid and adjust its size between the nav bar and footer without any spacing in-between. Currently, the main content container extends beyond the footer when viewed in FF and in both FF and II, the footer is past the end of the screen and required scrolling to view it.

How do I fix the css to force the footer to the bottom of the screen and instead of scrolling, the main content container would adjust its height accordingly.
html {height:100%;}

body {
margin: 0;
padding: 0;
height: 100%;
background-color: #cccccc;
font-family: arial, serif;
font-size: 9pt;
}

h1 {
position: relative;
margin: 0;
}

table {
margin: auto;
padding: 5px;
}

caption {
margin: auto;
padding: 5px;
color: #0000ff;
text-align: center;
font-size: 125%;
font-weight: bold;
}

td, th {
text-align: left;
padding-left: 5px;
padding-right: 5px;
}

#page_container {
position: relative;
width: 950px;
height: 100%;
margin: auto;
}

#header {
height: 130px;
padding: 10px;
text-align: center;
}

#nav_bar {
background-color: #eeeeee;
padding: 5px 0 5px;
text-align: center;
word-spacing: 10px;
font-weight: bold;
}

#content {
position: relative;
height: 100%;
padding-bottom: 150px;
overflow: auto;
}

* html #container {
height: 100%;
}

#footer {
position: absolute;
bottom: 0px;
height: 130px;
width: 100%;
background-color: #eeeeee;
text-align: center;
color: Red;
overflow: auto;
}

#header, #content {
background-color: white;
text-align: center;
}

#fatal {
border: thin solid grey;
float: right;
width: 35%;
padding: 10px;
}

#warning {
float: left;
width: 40%;
padding: 10px;
}

.left {
float: left;
margin-left: 10px;
}

.right {
float: right;
margin-right: 10px;
}

I'm using an html template, so this is the source of the rendered page. If it would help, I could also post the template source which will include additional details.
<!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" xml:lang="en" lang="en">

<head>
<title>Email Administration</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/emadmin/admin.css" />
</head>

<body>
<div id="page_container">


<div id="header">
<div class="left"><img src="/emadmin/left-logo.gif" alt="" /></div>
<div class="right"><img src="/emadmin/rt-logo.gif" alt="" /></div>
<div><img src="/emadmin/name.jpg" alt="" /></div>
<div><h1>Email Administration</h1></div>
<span class="left">emhttp101</span>
<span class="right"><a href="login.pl?Logout=Logout">Logout</a> rkb</span>
</div>



<div id="nav_bar">
<a href="search_v2.pl">Search</a>
<a href="modify_v2.pl">Modify</a>
<a href="delete_v2.pl">Delete</a>
<a href="passwd_v2.pl">ChgPassword</a>
</div>



<div id="content">
<h2>Search Address Book</h2>
<form method="post" action="search_v2.pl" enctype="multipart/form-data">
By:
<select name="searchfield">
<option value="email">Login ID</option>
<option value="lastname">Last Name</option>
<option value="firstname">First Name</option>
<option value="label">Description</option>
</select>
<input type="text" name="searchvalue" />
<input type="submit" name="locate" value="Locate User" />
</form>
<hr />



</div>



<div id="footer">

</div>


</div>
</body>
</html>

_Aerospace_Eng_

10-12-2007, 07:16 AM

http://www.cssplay.co.uk/layouts/fixit.html
http://www.cssplay.co.uk/layouts/bodyfix.html
http://www.cssplay.co.uk/layouts/body4.html

FishMonger

10-12-2007, 07:13 PM

Thanks Aero, those examples should get me going on the right path.

FishMonger

10-13-2007, 11:45 PM

Status update:

I used the css code from the "bodyfix" example since it was the closest to the style I was attempting. I adjusted the widths, heights and colors to meet my requirements and it worked great in FF but not in IE. The footer was positioned correctly but main content container still grew/extended beyond the footer when the table from the db call grew.

At first I thought that my adjustments to the heights goofed things up, so I started over and did a straight copy/paste without making any adjustments, but still had the same problem in IE. I even changed the DOCTYPE from Transitional to Strict and validated the code, but still no go in IE. The odd thing is that the example itself at cssplay (http://www.cssplay.co.uk/layouts/bodyfix.html) appears works properly in both FF and IE.

I'd really appreciate it if someone could point out what I'm doing wrong.

Here's the current css that I'm using.
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#53829d;
font-size:85%;
font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background:#0050a0;
}

#content {
display:block;
overflow:auto;
position:absolute;
z-index:3;
top:167px;
bottom:135px;
width:850px;
margin-left:-426px;
left:50%;
padding-bottom: 25px;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff;
text-align: center;
}

* html #content {
top:0;
bottom:0;
height:100%;
width:850px;
border-top:170px solid #fff;
border-bottom:150px solid #fff;
}

#head {
position:absolute;
padding-top: 10px;
margin-left:-426px;
left:50%;
top:0;
width:850px;
min-width:850px;
height:130px;
background:#fff;
text-align: center;
font-size:1em;
z-index:5;
border:1px solid #000;
}

* html #head {
top:2px;
width:850px;
height:140px;
}

#foot {
position:absolute;
margin-left:-426px;
left:50%;
bottom:0;
width:850px;
min-width:850px;
height:130px;
font-size:1em;
z-index:5;
border:1px solid #000;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-weight:bold;
color:#000;
background:#fff;
overflow:auto;
}

* html #foot {
bottom:2px;
width:850px;
height:130px;
}

#nav_bar {
position:absolute;
padding-top: 5px;
margin-left:-426px;
left:50%;
top:141px;
width:850px;
min-width:850px;
height:20px;
background:#0050a0;
font-size:1em;
text-align: center;
word-spacing: 10px;
font-weight: bold;
z-index:6;
}

#fatal {
width: 35%;
float: right;
padding: 10px;
border:1px solid #000;
color: #ff0000;
}

#notify {
width: 35%;
float: left;
padding: 10px;
border:1px solid #000;
}

.left {
float: left;
margin-left: 10px;
}

.right {
float: right;
margin-right: 10px;
}

a.nav_link, a.nav_link:visited {
font-size:1em;
text-decoration:none;
color:#ddd;
}

a.nav_link:hover {
color:#fff;
text-decoration:none;
}

.grey {color:#888;}

.ltgrey {color:#ddd;}

h1 {
position: relative;
margin: 0;
}

fieldset {
border-style: none;
}

table {
margin: auto;
}

caption {
margin: auto;
padding-top: 10px;
padding-bottom: 5px;
color: #0000ff;
text-align: center;
font-size: 125%;
font-weight: bold;
}

td, th {
text-align: left;
padding-left: 5px;
padding-right: 5px;
}

_Aerospace_Eng_

10-14-2007, 12:02 AM

Did you notice the first line?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

FishMonger

10-14-2007, 12:14 AM

LOL, It's always the simplest things that seem to bite us, or at least they bite me. :)

Works now, thanks.