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

Forum Moderators: not2easy

Message Too Old, No Replies

Menu problems

Menue and footer problems

         

greentrain67

10:39 am on Dec 20, 2005 (gmt 0)

10+ Year Member



HI All

I am working on a site that pages are all different lengths with a footer at the bottom of each page. The left hand menu is set to the pixel length of the longest page. Is there a way I can get the page footer to snap to the bottom of the left menu rather than making the pages all the same length. Here is the CSS the site.

With thanks Jason

html,body {
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}

body {
margin: 5px 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

div#container {
width: 760px;
margin: 0px auto;
border: 1px solid black;
}

div#headbanner {
position: relative;
width: 100%;
height: 140px;
clear: both;
}

div#title {
position: relative;
clear: left;
height: 15px;
}

div#breadcrumb {
width: 100%;
background-color: #0033CC;
line-height: 15px;

}

div#pl {
width: 100%;
background-color:#000000;
line-height: 1px;
clear:both;
}

div#breadcrumb a:link,div#breadcrumb a:visited,div#breadcrumb a:hover,div#breadcrumb a:active {
color:#FFFFFF;

font-family:Arial,Helvetica,sans-serif
font-size: 10px;
text-decoration: none;
font-size: 0.9em;
}

div#breadcrumb a:hover {
color:#FF9900
font-family:Arial, Helvetica, sans-serif
font-size: 10px;
color:#FF9900;
text-decoration: underline;
}

div#bctext {
margin-left: 5px;
}

div#men {
margin-top: 5px;
}

div#menu {
position: relative;
background-color: #0033CC;
float: left;
width: 150px;
height:1400px;
}

div#bodytext {
position: relative;
float: right;
clear: right;
width: 580px;
text-align: left;
padding: 10px 5px;
}

div#bodytextpl {
position: relative;
float: left;
clear: right;
width: 521px;
text-align: left;
padding: 10px 40px;
}

div#par a:link,div#par a:visited,div#par a:hover,div#par a:active {
color:#FF9900;
font-family:Arial,Helvetica,sans-serif
font-size: 0.9em;
text-decoration: none;
font-weight: bold;
}

div#par a:hover {
color:#0000FF;
font-family:Arial, Helvetica, sans-serif
font-size: 0.9em;
text-decoration: underline;
font-weight: bold;

}

div#textbox p {
margin: 3px;
padding: 0px;
}

div#footer {
position: relative;
clear: both;
width: 760px;
background-color: #0033CC;
height: 20px;

}

dl {
margin: 0px;
padding: 0px;
}
dt {}
dd {
line-height: 2px;
}

div#menu a:link,div#menu a:visited,div#menu a:hover,div#menu a:active {
display: block;
width: 150px;
line-height: 25px;
color:#FFFFFF;
background-color: #99CCFF;
background: url(images/abc123u.gif) repeat-x;
text-decoration: none;
}

div#menu a:hover {
color: white;
background-color: #9999FF;
background: url(images/abc123d.gif) repeat-x;
}

h1 {
width: 760px;
background-color: #000099;
margin: 0px;
padding: 0px;
font-size: 1.5em;
}

.floatright {
float: right;
margin: 5px;
border: 1px solid black;
}
.style1 {color: white}

xfinx

10:48 am on Dec 20, 2005 (gmt 0)

10+ Year Member



can you please add some html with it?

greentrain67

11:03 am on Dec 20, 2005 (gmt 0)

10+ Year Member



The is the CSS and HTML for the index page.

Thanks
Jason

html,body {
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}

body {
margin: 5px 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

div#container {
width: 760px;
margin: 0px auto;
border: 1px solid black;
}

div#headbanner {
position: relative;
width: 100%;
height: 140px;
clear: both;
}

div#title {
position: relative;
clear: left;
height: 15px;
}

div#breadcrumb {
width: 100%;
background-color: #0033CC;
line-height: 15px;

}

div#pl {
width: 100%;
background-color:#000000;
line-height: 1px;
clear:both;
}

div#breadcrumb a:link,div#breadcrumb a:visited,div#breadcrumb a:hover,div#breadcrumb a:active {
color:#FFFFFF;

font-family:Arial,Helvetica,sans-serif
font-size: 10px;
text-decoration: none;
font-size: 0.9em;
}

div#breadcrumb a:hover {
color:#FF9900
font-family:Arial, Helvetica, sans-serif
font-size: 10px;
color:#FF9900;
text-decoration: underline;
}

div#bctext {
margin-left: 5px;
}

div#men {
margin-top: 5px;
}

div#menu {
position: relative;
background-color: #0033CC;
float: left;
width: 150px;
height:1400px;
}

div#bodytext {
position: relative;
float: right;
clear: right;
width: 580px;
text-align: left;
padding: 10px 5px;
}

div#bodytextpl {
position: relative;
float: left;
clear: right;
width: 521px;
text-align: left;
padding: 10px 40px;
}

div#par a:link,div#par a:visited,div#par a:hover,div#par a:active {
color:#FF9900;
font-family:Arial,Helvetica,sans-serif
font-size: 0.9em;
text-decoration: none;
font-weight: bold;
}

div#par a:hover {
color:#0000FF;
font-family:Arial, Helvetica, sans-serif
font-size: 0.9em;
text-decoration: underline;
font-weight: bold;

}

div#textbox p {
margin: 3px;
padding: 0px;
}

div#footer {
position: relative;
clear: both;
width: 760px;
background-color: #0033CC;
height: 20px;

}

dl {
margin: 0px;
padding: 0px;
}
dt {}
dd {
line-height: 2px;
}

div#menu a:link,div#menu a:visited,div#menu a:hover,div#menu a:active {
display: block;
width: 150px;
line-height: 25px;
color:#FFFFFF;
background-color: #99CCFF;
background: url(images/abc123u.gif) repeat-x;
text-decoration: none;
}

div#menu a:hover {
color: white;
background-color: #9999FF;
background: url(images/abc123d.gif) repeat-x;
}

h1 {
width: 760px;
background-color: #000099;
margin: 0px;
padding: 0px;
font-size: 1.5em;
}

.floatright {
float: right;
margin: 5px;
border: 1px solid black;
}
.style1 {color: white}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Early Reading Development Pilot</title>
<script type="text/javascript" src="rightmouse.js"></script>
<link href="site.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
<style type="text/css">
<!--
.style3 {
color: #FFFFFF;
font-size: 0.9em;
}
.style5 {font-size: 0.8em}
.style6 {color: #FFFFFF; font-size: 0.8em; }
-->
</style>
</head>
<body>
<div id="container">
<div id="headbanner"><img src="images/banner.gif" alt="banner" width="760" height="142"></div>
<div id="title">
<h1 class="style6">Home</h1>
</div>
<div id="breadcrumb">
<div align="left" class="style3" id="bctext">Home</div>
</div>
<div id="menu">
<dl>
<div id="men"></div>
<dt><a href="index.html">Home</a></dt>
<dd>&nbsp;</dd>
<dt><a href="practitioners.html">Practitioners</a></dt>
<dd>&nbsp;</dd>
<dt><a href="consultants.html">Consultants</a></dt>
<dd>&nbsp;</dd>
<dt><a href="parents.html">Parents</a></dt>
<dd>&nbsp;</dd>
<dt><a href="casestudy.html">Case studies</a></dt>
<dd>&nbsp;</dd>
<dt><a href="resources.html">Resources</a></dt>
<dd>&nbsp;</dd>
<dt><a href="contacts.html">Contacts</a></dt>
<dd>&nbsp;</dd>
<dt><a href="http://www.nationalstrategiescpd.org.uk/course/view.php?id=13" target="_blank">Forum</a><dd>&nbsp;</dd>
<dt><a href="help2.html" target="_blank">Help</a></dt></dt>
</dl>
<p><img src="images/pri_nat_strat_logo_140px.gif" alt="P n s logo" width="140" height="59"></p>
<p><img src="images/surestart_140px.gif" alt="sure start" width="140" height="48"></p>
<p><img src="images/dfes_logo_140px.gif" width="140" height="22"></p>
</div>
<div id="bodytext">
<SCRIPT LANGUAGE="Javascript">

function randimg() { } ; r = new randimg() ; n = 0

//-------------Database----------
r[n++]= '<IMG SRC="images/1.jpg" WIDTH="100" HEIGHT="100" align="right">'
r[n++]= '<IMG SRC="images/2.jpg" WIDTH="100" HEIGHT="100" align="right">'
r[n++]= '<IMG SRC="images/3.jpg" WIDTH="100" HEIGHT="100" align="right">'
r[n++]= '<IMG SRC="images/4.jpg" WIDTH="100" HEIGHT="100" align="right">'
r[n++]= '<IMG SRC="images/5.jpg" WIDTH="100" HEIGHT="100" align="right">'
r[n++]= '<IMG SRC="images/6.jpg" WIDTH="100" HEIGHT="100" align="right">'
r[n++]= '<IMG SRC="images/7.jpg" WIDTH="100" HEIGHT="100" align="right">'
r[n++]= '<IMG SRC="images/8.jpg" WIDTH="100" HEIGHT="100" align="right">'
r[n++]= '<IMG SRC="images/9.jpg" WIDTH="100" HEIGHT="100" align="right">'
//----------------------

i=Math.floor(Math.random() * n) ;
document.write( r[i] )
//-->
</script><br>
<p><span class="style5"><strong>The aims of the pilot are to:</strong> </span></p>
<ul class="style5">
<li>Offer intensive support to schools and key linked settings to implement a programme of phonic teaching based on &ldquo;Playing with Sounds&rdquo;, in order to test the pace of teaching of phonic knowledge including whether children can learn all phonemes, including the &ldquo;long vowel sounds&rdquo; by the end of the foundation stage within the context of a rich and relevant early years curriculum.<br>
<br>
</li>
<li>test out the impact of that programme on childrens early reading and other areas of learning, including personal, social and emotional development.<br>
<br>
</li>
<li>promote the active engagement of parents in their childrens early reading development.</li>
</ul>
<p class="style5"><strong>The design of the pilot<br>
</strong><br>
The pilot is designed around an action research model where schools and key linked settings will be supported by an &lsquo;Early Reading Development&rsquo; consultant who will work with the pilot schools and settings to support the teaching of phonics within a rich and relevant early years curriculum. </p>
<p class="style5">This website is to support you in accessing materials and contributing by providing you with the facility to submit your own plans, resources and case studies. </p>
<p><br>
<br>
</p>
</div>
<div id="footer" align="right">
<div id="breadcrumb" align="center"><a href="copyright.html" target="_blank">Crown Copyright</a><div>
</div>
</div>
</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

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