Jump to content

height designation affects footer and background

owosso

By owosso
in CSS

Recommended Posts

owosso Member

owosso

Posted
Posted

I'm having problems getting the footer #address to align correctly. I have #horizontalContainer which is positioned above #address. It contains everything except the #address. It also has a repeating background image of the gradient and a white background color.If I designate the height for #horizontalContainer at 1000 pixels, the #address sits below it correctly in IE but too far below in everything else. 1000px.jpgIf I designate the height for #horizontalContainer at 100%, the background image and color of this div do not show up and the grey background of the body comes through. The #address however, is in the correct place! http://www.adunate.com/100percent.jpgAny thoughts?Here's html code:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>JWR, Inc., Parts</title><link href="jwrSub.css" rel="stylesheet" type="text/css" /></head><body><div id="horizontalContainer"><div id="header">  <div align="right"><img src="jwrImages/trucks.jpg" alt="JWR truck fleet" width="365" height="102" /></div></div>	<div id="navHor">         <p align="center"><a href="jwrIndex.html">Home</a><span><a href="contacts.html">Contact</a></span><span><a href="equipment.html">Equipment Sales</a></span><span><a href="news.html">News</a></span><span><a href="employment.html">Employment</a></span></p>  </div>            <div id="navLeft">     <!--Start vertical navigation -->        <ul style="list-style-type: none; margin: 0;">                 <li style="margin-right: 55px"><div id="youarehere"><p align="right"><a href="about.html">About JWR</a></p>   </div></li><li style="margin-right: 85px">  <p align="right"><a href="recycling.html">Your Recycling<br />  Solutions</a></p></li><li style="margin-right: 95px">  <p align="right"><a href="waste.html">Waste Solutions</a></p></li><li style="margin-right: 105px">  <p align="right"><a href="product.html">Product Specific Solutions</a></p></li><li style="margin-right: 110px">  <p align="right"><a href="industry.html">Industry Specific Solutions</a></p></li><li style="margin-right: 110px">  <p align="right"><a href="service.html">Service & <br />    Installation</a></p></li><li style="margin-right: 110px">  <p align="right"><a href="used.html">Used Equipment</a></p></li><li style="margin-right: 110px">  <p align="right"><a href="parts.html">Parts</a></p></li></ul>  </div>     <!--Close #navLeft End verticle navigation -->        <div id="rightContainer">    <img src="jwrImages/welding.jpg" alt="JWR Inc., welding" width="186" height="335" class="floatRight" />          <h1>A long and reliable history</h1>            <p>JWR is located in Johnson Creek, Wisconsin. JWR’s roots go back to 1972 when “Jim’s Welding & Repair” started as a small welding and repair shop. At that time repairs were made for local farmers and small fabrication jobs were performed. </p>      <p>Throughout the years the business took on many other facets including sandblasting, painting, truck and hoist repair, container repair and finally compactor installation and maintenance for local accounts. Jim’s Welding & Repair evolved into JWR as we know it today. </p>		  <h1>Our company today            </h1>            <p>JWR has since grown into a company with national presence servicing over 6000 compactors nationwide and performing over 500 installations on a yearly basis.                         JWR provides equipment and solutions for the waste and recycling industry. In addition to our corporate facility based out of Johnson Creek WI, we have a service location in Minneapolis, MN, an experienced sales staff, a full team of professional service technicians, installers and office personnel.</p>            <p align="center"><img src="jwrImages/companyToday.jpg" alt="JWR Inc., today" width="460" height="209" /></p>            <p align="center"> </p>  </div>      <!--close #horizontalContainer --></div>   <div id="address">          <p>322 N. Watertown Street, P.O. Box 356, Johnson Creek, WI 53038 • 888-699-2848 • FAX: 920-699-2847</p></div>              </body></html>

Here's the CSS code:

body {  	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;  	margin: 0px;	padding: 0px;	background-color: #CCCCCC;	font-size: 62.5% /* 16px × 62.5% = 10px */;}p	{ font-size: 1.2em; color: #000000; line-height: 1.6em; }	p span	{ margin-left: 75px; }		a:link, a:visited	{ font-size: 1.2em; color: #000000; text-decoration: underline; }	a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: underline; }			h1	{	color:#AC2a2B;	font-size: 1.8em;	font-weight: bold;	}	h2	{ color:#000000; font-size: 1.6em; font-weight: bold; line-height: 1.2em; }h3	{ color:#000000; font-size: 1.2em; font-weight: bold; line-height: 1.2em; }	h4	{ color:#000000; font-size: 0.8em; }img.floatLeft {     float: left;     margin: 10px; }img.floatRight {     float: right;     margin: 10px; }#horizontalContainer	{	background-image: url(jwrImages/gradient.png);	background-repeat: repeat-y;	height: 100%;	margin-top: 10px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	background-color: #FFFFFF;	width: 760px;	z-index: 1;	position: relative;	}#header	{	width: 760px;	z-index: 2;	top: 2px;	background-image: url(jwrImages/header.gif);	background-repeat: no-repeat;	padding-top: 30px;	}#header	span	{	margin-left: 100px;}#rightContainer	{	height: 100%;	float: right;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	position: relative;	z-index: 5;	width: 480px;	padding-top: 30px;	padding-right: 20px;}				#navHor	{	width: 760px;	z-index: 5;	background-color: #999999;	border-bottom-width: 3px;	border-top-style: solid;	border-bottom-style: solid;	border-top-color: #000000;	border-bottom-color: #000000;	left: 0px;	height: auto;	border-top-width: 1px;	position: relative;	}	#navHor a:link, a:visited	{ font-size: 1.2em; color: #000000; text-decoration: none; }	#navHor a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: none; }			#navLeft	{	width: 255px;	float: left;	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	height: 451px;	z-index: 4;	position: relative;	background-image: url(jwrImages/abstractSub.png);	background-repeat: no-repeat;	padding-top: 15px;	background-color: #FFFFFF;}#navLeft a:link, a:visited	{ font-size: 1.2em; color: #000000; text-decoration: none; }	#navLeft a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: none; }	ul#navLeft {	width: 80px;	position: absolute;	z-index: 3;	left: 45px;	top: 0px;	background-color: #FFFFFF;	height: 200px;	}		ul#navLeft li {	text-align: right;	text-decoration: none;	list-style: none;	height: 45px;}ul#navLeft li a {	text-decoration: none;	display: block;	}ul#navLeft li {	background-color: DDDDc2;	text-decoration: none;	border-bottom-width: 4px;	border-bottom-style: solid;	border-bottom-color: #6F6659;	}		#youarehere	{	background-color:#FFFFFF;	padding-right: 5px;	}#address	{	width: 760px;	border-bottom-width: 2px;	border-bottom-style: solid;	border-bottom-color: #000000;	font-size: 1em;	padding-bottom: 2px;	background-color: #999999;	border-top-width: 4px;	border-top-style: solid;	border-top-color: #000000;	position: relative;	margin-right: auto;	margin-left: auto;	clear: both;	text-align: center;	}	#address span	{ margin-left: 25px;	}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...