Hello,
I have a page that I want to have borders on all 4 sides. The problem is, the bottom border does not extend to the bottom of the page. It stops mid-way, with content extending below it.
Here is my 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=utf-8" />
<title>Solar, Wind, and Green Energy Products Grab-Bag</title>
<meta name="description" content="Selected Solar Wind Geothermal, and Green Energy products for Home and Business" />
<meta property="og:type" content="product" />
<meta property="og:title" content="California Solar and Green" />
<meta property="og:url" content="http://www.californiasolarandgreen.com" />
<meta property="og:site_name" content="California Solar and Green" />
<meta property="fb:admins" content="1054106741" />
<meta property="og:image" content="http://www.californiasolarandgreen.com/images/greensun.jpg" />
<meta property="og:description" content="Information and Resources for Solar Wind & Green, Renewable Alternative Energy Technologies." />
<link rel="stylesheet" type="text/css" href="style6.css" />
<style type="text/css">
html
{
height:100%;
width:100%;
}
body
{
height:100%;
background-color:#f0f0f0;
background-image:url(images/white7.jpg);
color:#002907;
font-family:Verdana, 'Trebuchet MS', Tahoma, sans-serif;
/* border:2px ridge #CCFF00;*/
}
#container
{
padding:5px;
margin-bottom:10px;
margin-left:20px;
height:100%;
border:2px ridge #CCFF00;
}
#header
{
background-image:url(images/title.png);
background-repeat:no-repeat;
width:100%;
height:156px;
margin-bottom:20px;
float:left;
}
#blurb
{
text-align:left;
margin-left:10px;
float:left;
clear:left;
width:510px;
}
#blurb h1
{
font-size:12pt;
color:#009900;
font-weight:600;
text-align:left;
}
#blurb p , h2
{
font-size:11pt;
font-weight:400;
color:#009900;
text-align:left;
padding-left:7px;
margin-left:0px;
}
.products
{
float:left;
clear:both;
text-align:left;
padding-left:10px;
margin-bottom:10px;
margin-left:10px;
}
.item a
{
line-height:20px;
font-size:10pt;
color:#ee637c;
text-align:left
}
.item a:hover
{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="container">
<div id ="header">
<div style="float:right;clear:none;width:350px;height:35px; margin:5px 0 0 0;vertical-align:middle;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like ref="green_grab_bag" href="http://www.californiasolarandgreen.com" show_faces="false" width="350" font="trebuchet ms"></fb:like>
</div>
</div>
<div style="float:left;clear:both;margin-left:12px; vertical-align:middle;">
<form action="http://www.californiasolarandgreen.com/searchbox.html" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-6024873830942090:lih2nm-3cam" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" style="color:#ffff00; background-color:#339900; vertical-align:top; margin-top:-1px;" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</div>
<div style="float:right;clear:none;margin-right:60px;">
<a href="index.html">
<img src="images/home.png" alt="back to california solar and green" width="51" height="50" border="0" align="right" style="margin-top:20px;" /></a>
</div>
<div id="blurb">
<h1>
Green Grab-Bag
</h1>
<h2>
Browse through the assorted products below to find new and exciting
innovations in solar, wind, geothermal, and other green energy technologies!
</h2>
</div>
<div class="products">
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000055&type=3&subid=0" target="_blank">Toilet Lid Sink</a>
<img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000055&type=3&subid=0" /></span><br />
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000054&type=3&subid=0" target="_blank">Flower Seed Wrapping Paper</a>
<img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000054&type=3&subid=0" />
<br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000053&type=3&subid=0" target="_blank">Auto Ionizer</a>
<img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000053&type=3&subid=0" />
<br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000038&type=3&subid=0" target="_blank">Real Goods Camping Landing Page</a>
<img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000038&type=3&subid=0" />
<br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000040&type=3&subid=0" target="_blank">Aeonic Gooseneck LED Lamp</a>
<img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000040&type=3&subid=0" />
<br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000041&type=3&subid=0" target="_blank">Trevor Baylis Wind-Up Eco Media Player</a>
<img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000041&type=3&subid=0" />
<br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000042&type=3&subid=0" target="_blank">LED Lantern</a>
<img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000042&type=3&subid=0" />
<br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000043&type=3&subid=0" target="_blank">Eco-Thermo Bamboo Sleeping Pads</a><br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000044&type=3&subid=0" target="_blank">Solar Camera Gear Bag</a>
<img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000044&type=3&subid=0" />
<br /></span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000045&type=3&subid=0" target="_blank">Thai Bamboo Utensil Set</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000045&type=3&subid=0" /><br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000046&type=3&subid=0" target="_blank">Katadyn Base Camp Water Filter</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000046&type=3&subid=0" /><br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000047&type=3&subid=0" target="_blank">World's Smallest Weatherband Radio</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000047&type=3&subid=0" /><br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000048&type=3&subid=0" target="_blank">Light Eco Recycled Polyester Sleeping Bag</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000048&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000037&type=3&subid=0" target="_blank">Mini Everlite Solar LED Light. Was $59, Now $29</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000037&type=3&subid=0" /><br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000026&type=3&subid=0" target="_blank">Solio Solar Charger</a><br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000027&type=3&subid=0" target="_blank">Portable Solar Electronics Charger</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000027&type=3&subid=0" /><br />
</span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000028&type=3&subid=0" target="_blank">Universal Solar Charger</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000028&type=3&subid=0" /><br /></span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000029&type=3&subid=0" target="_blank">Solar Cascade Fountain - Terracotta Mosaic</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000029&type=3&subid=0" /><br /></span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000030&type=3&subid=0" target="_blank">Solar Birdbath Fountain</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000030&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000034&type=3&subid=0" target="_blank">Outdoor Misting Fan</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000034&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000035&type=3&subid=0" target="_blank">Kill-A-Watt</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000035&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000036&type=3&subid=0" target="_blank">Global Solar Energy Extra Connectivity Kit</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000036&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000025&type=3&subid=0" target="_blank">Outdoor Multi-Watch</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000025&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000024&type=3&subid=0" target="_blank">Household Cleaning Products</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000024&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000006&type=3&subid=0" target="_blank">Solar Power</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000006&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000007&type=3&subid=0" target="_blank">Camping</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000007&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000008&type=3&subid=0" target="_blank">Solar Toys & Gifts</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000008&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000009&type=3&subid=0" target="_blank">Sustainable Library</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000009&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000010&type=3&subid=0" target="_blank">Air Quality & Climate Control</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000010&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000011&type=3&subid=0" target="_blank">Water Quality & Conservation</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000011&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000012&type=3&subid=0" target="_blank">Eco-Lighting</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000012&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000013&type=3&subid=0" target="_blank">Wind Power</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000013&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000014&type=3&subid=0" target="_blank">HydroElectric Power</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000014&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000015&type=3&subid=0" target="_blank">Solar Water Pumping</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000015&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000016&type=3&subid=0" target="_blank">Ponds and Fountains</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000016&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000017&type=3&subid=0" target="_blank">Solar Hot Water</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000017&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000018&type=3&subid=0" target="_blank">Tankless Water Heaters</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000018&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000019&type=3&subid=0" target="_blank">Real Goods Outlet Sale. Save up to 75% off instantly</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000019&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000020&type=3&subid=0" target="_blank">Power your MP3s, Cell Phones, and Laptops with Solar Chargers - great for travel and as low as $79.</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000020&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000021&type=3&subid=0" target="_blank">Find the only Solar Power MP3 Player at Real Goods Solar now only $199.</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000021&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000022&type=3&subid=0" target="_blank">The only Wind-Up Eco Media Player</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000022&type=3&subid=0" /><br /></span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000023&type=3&subid=0" target="_blank">Green your Home or Office with Solar Products available exclusively at Real Goods Solar.</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000023&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000001&type=3&subid=0" target="_blank">Real Goods Homepage</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000001&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000002&type=3&subid=0" target="_blank">Turn Sunshine into Electricity with Solar Panels from Real Goods Solar</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000002&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000003&type=3&subid=0" target="_blank">Real Goods Solar will match or beat any price on PV Modules with a valid written price quote</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000003&type=3&subid=0" /><br /> </span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000004&type=3&subid=0" target="_blank">Real Goods Solar: Everything you Want to Know about Renewable Energy, Green Living & More</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000004&type=3&subid=0" /><br /></span>
<span class="item">
<a href="http://click.linksynergy.com/fs-bin/click?id=uBaG/noP6gM&offerid=194438.10000005&type=3&subid=0" target="_blank">Real Goods Outlet Sale. Save up to 75% off instantly</a><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=uBaG/noP6gM&bids=194438.10000005&type=3&subid=0" /><br /></span>
</div>
</div>
</body>
</html>
I have also tried various tricks that I thought might work:
html
{
height:100%;
min-height: 100%;
width:100%;
}
body
{
height:100%;
min-height: 100%;
background-color:#f0f0f0;
background-image:url(images/white7.jpg);
color:#002907;
font-family:Verdana, 'Trebuchet MS', Tahoma, sans-serif;
/* border:2px ridge #CCFF00;*/
}
#container
{
padding:5px;
margin-bottom:10px;
margin-left:20px;
height:100%;
min-height: 100%;
border:2px ridge #CCFF00;
}
These have been tried in various combinations.
Further, I have tried adding the !important attribute to the heights, but nothing.
How can the html and body tags be set to 100% and still have page content extend outside of those confines??
This might be useful, here is the url of my page in question:
http://www.californiasolarandgreen.com/solar-products-test.html
Any clues?
Rick