can someone just tell me why my leftcolum doesnt fill my container 100% height. and also why my content container doesnt fill the container 100% height i have declared the heights within the
css for both of these atributes to be 100%
pardon my ignorance being a newbie and all.
css code
- Code: Select all
#header {width:100%; min-height:89px; max-height:89px; background-color:#FF6600}
#linkholder {width:100%; min-height:23px; max-height:23px; background-color:#374256}
A:link {text-decoration: none; color: #0099FF}
A:visited {text-decoration: none; color: #0099FF}
A:active {text-decoration: none; color: #0099FF}
A:hover {text-decoration: underline; color: #FFFFFF}
#contentcontainer {float:right; background-color: #3399FF; width:754px; height:100%; }
#news { float:left; margin-left:20px; background-color:#0066FF; min-width:350px; max-width:350px; margin-top:10px; margin-bottom: 20px; border-right:#CCCCCC thin solid }
#rightinfo { float:right; margin-right:20px; background-color:#0066FF; min-width:350px; max-width:350px; margin-top:10px; margin-bottom: 20px }
#belownews{ clear:both; background-color: #0099FF; width:560px; margin-right:20px; margin-left:20px; border-top: #CCCCCC thin; margin-top:20px }
#leftcoloum {float:left; background-color: #015eb0; min-width:146px; max-width:146px; height:100%; overflow:hidden; margin-bottom:0px}
#bottomlinks { clear:both; width:100%; min-height:23px; max-height:23px; background-color:#374256}
#bottombar { width:100%; min-height:26px; max-height:26px; background-color:#374256}
html.
- Code: Select all
<!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>Untitled Document</title>
<!-- link top stlye sheet -->
<LINK href="css/grids.css" rel="stylesheet" type="text/css">
<!-- End link to Style sheet -->
<style type="text/css">
<!--
.style1 {
color: #CCCCCC;
font-weight: bold;
}
.style2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-image: url(images/Underwater_Bubbles_by_X_Anime_Fan_X.jpg);
}
.style4 {font-size: 16px}
.style6 {
color: #CCCCCC;
font-size: 16px;
font-weight: bold;
}
.style7 {color: #000000}
-->
</style>
</head>
<body>
<!--Container to hold all the elements -->
<center><div id="container">
<!--Header to hold the logo -->
<div id="header"><img src="images/layout_01.jpg" width="900" height="89" /></div>
<!--end of Header to hold the logo -->
<!--link holder grey bar that sits underneath the header -->
<div id="linkholder">
<div align="left">
<a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home
</a> | <a href="http://www.google.co.uk">Home
</a> |
<a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home </a> | <a href="http://www.google.co.uk">Home </a> | </div>
</div>
<!--end of holder grey bar that sits underneath the header -->
<!--****************************************************************** -->
<!--content container to hold the content -->
<div id="contentcontainer">
<!-- news section -->
<div id="news">
<p align="center" class="style1"><span class="style4">News</span><br />
---------</p>
<p align="center" class="style2">Welcome to reef lovers. Where people come to Socialise with other reef lovers. Now take these 2 wallpapers and wack em on your desktop. Welcome to reef lovers. Where people come to Socialise with other reef lovers. Now take these 2 wallpapers and wack em on your desktop</p>
<p align="center" class="style2">Welcome to reef lovers. Where people come to Socialise with other reef lovers. Now take these 2 wallpapers and wack em on your desktop. Welcome to reef lovers. Where people come to Socialise with other reef lovers. Now take these 2 wallpapers and wack em on your desktop</p>
<p><span class="style2">Welcome to reef lovers. Where people come to Socialise with other reef lovers. Now take these 2 wallpapers and wack em on your desktop. Welcome to reef lovers. Where people come to Socialise with other reef lovers. Now take these 2 wallpapers and wack em on your desktop</span></p>
</div>
<!-- end of news section -->
<!-- rightinfo section -->
<div class="style6" id="rightinfo">
<p>Welcome To The Tanks<br />
<span class="style1">---------</span></p>
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" bgcolor="#0066FF">
<tr>
<td width="50px" bgcolor="#0033FF"><div align="center" class="style7">Tank Owner </div></td>
<td width="50px" bgcolor="#0033FF"><div align="center" class="style7">Pic</div></td>
<td width="50px" bgcolor="#0033FF"><div align="center" class="style7">Details</div></td>
</tr>
<tr>
<td width="" bgcolor="#0099FF"><div align="right"><span class="style7">Ben</span></div></td>
<td bgcolor="#0099FF"><div align="center"><a href="tank1.html"><img src="images/thumb/tank1.gif" alt="tank1" width="119" height="85" border="0" /></a></div></td>
<td bgcolor="#0099FF"><span class="style7">NA</span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<!-- end of rightinfo section -->
<!-- rightinfo section -->
<div id="belownews">
<p>Welcome to the </p>
<p><span class="style2">Welcome to reef lovers. Where people come to Socialise with other reef lovers. Now take these 2 wallpapers and wack em on your desktop. Welcome to reef lovers. Where people come to Socialise </span></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center"><a href="wallpaper2.html"><img src="images/thumb/windowslivewriterpufferfish.jpg" alt="puffer" width="100" height="89" border="2" /></a></div></td>
<td><div align="center"><a href="wallpaper1.html"><img src="images/thumb/wallpaper.jpg" alt="fus" width="100" height="89" border="2" /></a></div></td>
<td><div align="center"><a href="wallpaper4.html"><img src="images/thumb/tropical_fish_wallpaper.jpg" alt="tang" width="100" height="89" border="2" /></a></div></td>
<td><div align="center"><a href="wallpaper3.html"><img src="images/thumb/clown-fish2.jpg" alt="clown" width="100" height="89" border="2" /></a></div></td>
</tr>
</table>
</div>
<!-- end of rightinfo section -->
</div>
<!-- end of content container to hold the content -->
<!--****************************************************************** -->
<!--left content to hold the content -->
<div id="leftcoloum">
<p>thththhthththhgfhfghghgdrgorgkgrkgrkekgg</p>
<p>gkrgkrkg</p>
<p>erglrgkrg</p>
<p>rgkjrgjg</p>
<p>ergkjgje</p>
<p>ergejer</p>
<p>rgikhgh</p>
<p><img src="images/layout_12.jpg" width="124" height="203" /></p>
</div>
<!-- left content container to hold the content -->
<!--bottom links -->
<div id="bottomlinks"> rthtrhhth</div>
<!-- bottom links -->
<!--bottom bar -->
<div id="bottombar"> <img src="images/layout_08.jpg" width="900" height="26" /></div>
<!-- bottom bar -->
</div>
</center>
<!-- end of the container -->
</body>
</html>
Many thanks for any help you give me
help!!!!!!!!
Sep 11th, 2007, 19:03
