View Full Version : left div add to page with footer

10-22-2009, 04:42 AM
I'm currently running the following code on a page so that the footer is always at the bottom of the screen, regardless of how long the body text is. The current configuration works great but I need to add a div on the left side of the screen - between the head and foot - that runs the length of the body section (so that there will be a green bar from the bottom of the head to the top of the foot [since I'll give the div a green background]).

I've tried several options, including a repeating image in the background of the body and a
#left that I tried to fit next to the body since it's only 75% but that wouldn't have a height of 100% without eliminating my footer. I can't seem to get anything to work.

any help?

<STYLE TYPE="text/css">
html {margin:0; padding:0; border:0px none; height:100%}
body {height:100%; margin:0; padding-right:10;}
#wrap {min-height:100%; position:relative;}
* html #wrap {height:100%;}
#head {padding-top:95px; padding-bottom:20px;}
#head ul {margin:0; padding:0; list-style-type:none; text-align:center;}
#head ul li {display:inline;}

#body {width:75%; float: right; padding-top:25px;}
#foot {height:40px; position:absolute; bottom:0; left:0; width:100%; border-top: 4px solid #0f6953; text-align:right;}
#foot p {margin:0; padding:0;}
#clearfoot {clear:both;height:50px;}

<div id="wrap">

<div id="head">
header text

<div id="body">
body text

<div id="clearfoot">&nbsp;</div>

<div id="foot">
footer text that is always at the bottom of the screen regardless of how long the body text is

10-22-2009, 04:52 AM
Hello angyl,
You should have a look at the faux columns method of using a repeating background image. Here's a demo of mine that shows how it works - http://nopeople.com/CSS/faux_columns/index.html

Here is a full height example that uses the faux columns - http://nopeople.com/SoC/
The image used there is http://nopeople.com/SoC/contentBG.jpg which is repeated on the y axis as the background of #wrap.

10-23-2009, 12:00 AM
Hi Excavator,

Thanks! I actually used your http://nopeople.com/CSS/full-height-3column/index.html code and it works great.

I am having some trouble with my CSS links and I don't understand why and I was hoping you could help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Manage Today, Thrive Tomorrow</title>

<style type="text/css">
html, body{height: 100%; text-align: center;}
* {margin: 0; padding: 0;}
#wrap {width: 1000px; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ text-align: left; background: url(body.jpg) repeat-y;}
#header {width: 1000px; height: 150px; background: url(composite.jpg) no-repeat;}
#lcol {width: 187px; float: left; padding: 5px 0 0 0; background: red;}
#content {margin: 0 20px 0 187px; padding: 5px 0 0 0;}
#rcol {width: 20px; float: right; padding: 5px 0 0 0; background: blue;}
#footer, #push {width: 1000px; height: 50px; margin: 0 auto;}
#footer {border-top: 2px solid black; background: #606060;}
#push {clear: both; background:none;}

p {margin: 5px; font: 11px Verdana; color:#000; text-align:justify}
table, tr, td {font: 11px Verdana; color:#000}
li {margin-top: 12px; margin-bottom: 12px; font: 8pt Verdana; color:#000; text-align:justify}
h1 {font: 12px Verdana; color:#000}
h2 {font: 14px Verdana; color:#000}

hr {color:#000}
input, textarea {font: 10px Verdana; color:#000; text-align:justify; border: 1px solid #000; background-color:#fff}

A:link {font: bold 11px Verdana; color:#000; text-decoration:none}
A:visited {font: bold 11px Verdana; color:#3D710D; text-decoration:none}
A:active, a:hover {color:#000; text-decoration:underline}

A.nav:link {font: bold 12px Verdana; color:#fff; text-decoration:none}
A.nav:visited, A.nav:active, A:hover {font: 12px Verdana; color:#fff;


<div id="wrap">
<div id="header"></div>
<div id="lcol">
<a class="nav" href="home.html">Home</a><br /><br />
<a class="nav" href="back.html">Back</a><br /><br />
<!--closes lcol --></div>

<div id="rcol"><!--closes rcol --></div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
<a href="index.html"> diam nonumy eirmod tempor invidunt ut labore et dolore magna</a>
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
<!--closes content--></div>

<div id="push"></div>

<!--closes wrap--></div>

<div id="footer"><p>some footer text here</p></div>


Where I've used "a href" the link is black and bold, but when I hover over it, it turns white, not black and isn't underlined so something isn't right in a:active and a:hover
Similarly, in "a class=nav href" the links are white and bold but when hovered they are still bold and not underlined. Again, something's not right with A.nav:active and A:hover.

I tried validating my CSS and it validates fine so I don't know what's going on.

10-23-2009, 02:22 AM
Hello again angyl,
Try changing this bit in your CSS (highlighted in red) -
a.nav:link {font: bold 12px Verdana; color:#fff; text-decoration:none}
a.nav:visited, a.nav:active, a.nav:hover {font: 12px Verdana; color:#fff;

10-26-2009, 08:30 PM
I knew it was something simple like that. thank you!!