1 Replies - 859 Views - Last Post: 31 October 2011 - 04:23 AM

#1 mrben2006  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 26
  • Joined: 02-December 06

Div absolute bottom - Help getting two to work

Posted 31 October 2011 - 03:42 AM

Hi guys,

I have used this tutorial to get the my footer div to stick at the bottom, and it works great;

http://matthewjamest...tom-of-the-page

My client has asked me to give two coloured boxes, that stay at the bottom of the screen, such as this;

http://www.nuco-international.com/

I managed to get the 2nd div in no problem. It works perfectly when you have a large screen/window to view it in, but on smaller screens/windows the blue div starts to cover the content above it. It does however move down, but only when the content reaches down far enough to push the actual footer div down.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="keywords" content="concord,filing,ixa,centurion,filing products,office filing,uk based,london,liverpool,dividers,cards,archive boxes,office archives">
<meta name="description" content="Concord Filing Limited, the UK's largest privately owned manufacturer of office filing products. We supply Indexs, dividers, manilla files, folders,record cards, box files, expanding files, archive boxes and much more">


<title>Home | Concord Filing Products Limited</title>

<link href="concord.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="wrapped">
   
   <div id="header">
   		<div id="headerLeft" align="left">
			<img src="concord_logo_union.gif" alt="Concord Logo">
		</div>
		<div id="headerRight" align="right" class="header">
			Telephone: 030 3030 0300<br>
			Fax: 030 3030 0399<br>
			E-mail: <a class="header" href="mailto:[email protected]">[email protected]</a>
		</div>
   </div>
   
   <div id="body">
   		<div id="main">
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>fish</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>cod</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>push push</p>
			<p>cheese</p>
		</div>
   </div>
   
   <div id="middle">
   		<div id="middleCover" class="mainWhite">
			<p class="h1">Welcome to the Concord Filing Products Website</p>
			<p>Concord is the UK´s largest privately owned manufacturer of office filing products.</p>
			<p>It is the home of the established Concord, IXL and Centurion brands which offer a wide range of products at competitive prices.</p>
			<p>With the exception of books and pads, all of the products supplied are manufactured in the UK at the company´s two sites in London and Liverpool.</p>
			<p>Wherever practicable the company uses raw materials sourced from within the UK to minimise the impact on the environment of transportation.</p>
			<p>The company is ISO 9001:2008 certified.</p>
			<p>The company supplies both its branded and private label products to customers through wholesale and retail channels but can supply direct to customers subject to certain minimum order and quantity constraints.</p>			 	
			<p>Being a local supplier benefits customers from shorter lead times and lower stock holding and helps us all to protect the environment.</p>
		</div>
   
   </div>
   
   <div id="footer">
   		<div id="footerLeft" class="footer" align="left">
		Concord Filing Products Limited, 130 Nathan Way, London SE28 0AU
        <br>Company Registration Number: 07121839 					
		<br>VAT Registration Number: GB 983 0379 94 
		<br>© Concord Limited 2011
		</div>
		<div id="footerRight" class="footer" align="right">
		<a class="footer" href="#">Copyright</a>	<br>
		<a class="footer" href="environmental.htm">Envionmental</a>	<br>
		<a class="footer" href="ethics.htm">Ethics</a><br>
		<a class="footer" href="#">Sitemap</a>
		</div>
	</div>
</div>

</body>

</html>



The CSS...

/* CSS Document */

html, body {
   margin:0;
   padding:0;
   height:100%;
   }
   
#wrapped {
   min-height:100%;
   position:relative;
   }

/*--- Header ----------------------------------------------------------------*/

#header {
   background:#ffffff;
   padding:10px;
   padding-left:120px;
   padding-right:120px;
   height:90px;
   }
   
#headerLeft {
	float:left;
	height:100px;
	width:50%;
	}

#headerRight {
	float:right;
	height:100px;
	width:50%;
	}
   
/*--- Body ----------------------------------------------------------------*/

#body {
   padding:none;
   padding-bottom:80px;   /* Height of the footer */
   }
   
#main {
	padding-left:120px;
	padding-right:120px;
	height:auto;
	}

/*--- Middle ---------------------------------*/

#middle {
   position:absolute;
   bottom:80px;
   width:100%;
   height:300px;   /* Height of the middle */
   background:#234A95;
}

#middleCover {
	margin-left:120px;
	margin-right:120px;
	height:300px;
	}

/*--- Footer ----------------------------------------------------------------*/
   
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:80px;   /* Height of the footer */
   background:#000000;
   }
   
#footerLeft {
	padding-left:120px;
	float:left;
	padding-top:10px;
	}
	
#footerRight {
	padding-right:120px;
	float:right;
	padding-top:10px;
	}

/*--- Fonts ------------------------------------------------------------------*/

.header {font-family:Calibri; font-size:18px; color:#666666;}
.header a:link {text-decoration:none; color:#666666;}
.header a:visited {text-decoration:none; color:#666666;}
.header a:active {text-decoration:none; color:#666666;}
.header a:hover {text-decoration:underline; color:#666666;} 

.nav {font-family:Calibri; font-size:24; color:#666666;}
.nav a:link {text-decoration:none; color:#666666;}
.nav a:visited {text-decoration:none; color:#666666;}
.nav a:active {text-decoration:none; color:#666666;}
.nav a:hover {text-decoration:underline; color:#000000;} 

.mainBlack {font-family:Calibri; font-size:14px; color:#000000;}	
.mainBlack a:link {font-weight:bold; text-decoration:none; color:#000000;}
.mainBlack a:visited {font-weight:bold; text-decoration:none; color:#000000;}
.mainBlack a:active {font-weight:bold; text-decoration:none; color:#000000;}
.mainBlack a:hover {font-weight:bold; text-decoration:underline; color:#000000;}
	
.mainWhite {font-family:Calibri; font-size:14px; color:#ffffff;}	
.mainWhite a:link {font-weight:bold; text-decoration:none; color:#ffffff;}
.mainWhite a:visited {font-weight:bold; text-decoration:none; color:#ffffff;}
.mainWhite a:active {font-weight:bold; text-decoration:none; color:#ffffff;}
.mainWhite a:hover {font-weight:bold; text-decoration:underline; color:#ffffff;}

.mainGrey {font-family:Calibri; font-size:14px; color:#333333;}	
.mainGrey a:link {text-decoration:none; color:#333333;}
.mainGrey a:visited {text-decoration:none; color:#333333;}
.mainGrey a:active {text-decoration:none; color:#333333;}
.mainGrey a:hover {text-decoration:underline; color:#333333;}

.h1 {font-family:Calibri; font-size:18px; color:#ffffff; font-weight:bold;}

.h2 {font-family:Calibri; font-size:18px; color:#666666; font-weight:bold;}
	
.footer {font-family:Calibri; font-size:12px; color:#ffffff;}	
.footer a:link {text-decoration:none; color:#ffffff;}
.footer a:visited {text-decoration:none; color:#ffffff;}
.footer a:link {text-decoration:none; color:#ffffff;}
.footer a:hover {text-decoration:underline; color:#ffffff;}


First of all, is what I am trying to do even possible?

I basically want it to look like the attached screenshot, but so that the black and blue boxes nudge down when the content above forces it to.

I have attempted to use z-indexing, but I don't really know how that works and if that was the right thing to do anyway...

Help much appreciated

</Ben>

Attached image(s)

  • Attached Image
  • Attached Image

This post has been edited by mrben2006: 31 October 2011 - 03:44 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Div absolute bottom - Help getting two to work

#2 mrben2006  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 26
  • Joined: 02-December 06

Re: Div absolute bottom - Help getting two to work

Posted 31 October 2011 - 04:23 AM

Sorted it.

Changed the blue divs position to relative, and it has cured the issue.

Thanks to anyone who did look.

</ben>
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1