Div Layer Height 100% - How To/Problems

L

liunx

Guest
Hi there. I have a div layer that is called 'content'. I have a specified heiight to it now, but i want to make it 100% height. However, when i do that..its' height is one line, and only gets bigger when filled with content.

Heres the site code and style sheet code (sorry, my server JUST went down :S)

<!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=iso-8859-1">
<title>St. Francis Xavier Music Department</title>

<link rel="stylesheet" media="projection, screen" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"css/nav.css">
<link rel="stylesheet" media="projection, screen" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"css/style.css">

<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"js/drop_down.js"></script>
<script type="text/javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"js/java.js"></script>

</head>

<body>
<div id="Banner" class="banner">
<table bgcolor="#3D4A60" border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="header">
<td width="400"> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/leftban.jpg" alt="Xavier Music Dept." width="400" height="125"> </td>
<td width="100%"> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/midban.jpg" alt="Xavier Music Dept." width="100%" height="125"> </td>
<td width="200"> <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/rightban.jpg" alt="Xavier Music Dept." width="200" height="125"> </td>
</tr>
</table>
</div>
<div id="Sidebar" class="sidebar">
<p> </p>

</div>
<div id="Nav" class="nav">
<ul class="topmenu" id="dmenu">
<li class="topmenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="topmenutitleHome">HOME</a>
<ul class="submenuul">
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Introduction</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Calendar</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Announcements</a></li>
</ul>
</li>
<li class="topmenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="topmenutitleCurr">CURRICULUM</a>
<ul class="submenuul">
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Instrumental</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Vocal</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Guitar</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Awards</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Instructors</a></li>
</ul>
</li>
<li class="topmenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="topmenutitleExtra">EXTRACURRICULAR</a>
<ul class="submenuul">
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">General</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sr. Band</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Jr. Band</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Gr. 9 Band</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Jazz Band</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Wind Ensemble</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Choir</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Guitar Ensemble</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Repertoire</a></li>
</ul>
</li>
<li class="topmenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="topmenutitleMed">MEDIA</a>
<ul class="submenuul">
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Pictures</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Recordings</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Video Clips</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Animated ...</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Clipart ...</a></li>
</ul>
</li>
<li class="topmenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="topmenutitleOth">OTHER</a>
<ul class="submenuul">
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Links</a></li>
<li class="submenuli"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Fun!</a></li>
</ul>
</li>
</ul>
</div>
<div id="Content" class="content">
<p>RTrtrt</p>
<p>rt</p>
<p>rt</p>
<p>rt</p>
<p>rt</p>
<p>rt</p>
<p>rt</p>
<p>r</p>
<p>tr</p>
<p>t </p>
</div>
<div class="foot" id="footer">
ffff
</div>
</body>
</html>


and CSS

/* Styles */

#nav {float:left; width:200px; z-index:1; border:1px solid black;}
body {background-color: #FFFFFF; margin:1px 1px 1px 1px;}
a:visited {text-decoration: none; color:#FFFFFF;}
div.banner{float:right; width:100%; height:125px; z-index:3; background-color: #3D4A60; background-color: #6d81a1; border: 1px none #000000;}
div.nav{line-height:14px; border-bottom:8px solid #6d81a1; float:left; left:2px; padding:0 0 0 0; margin-top:1px; width:84.9%; height:26px; z-index:4; background-color: #40536F;}
div.content{float:left; margin-top:1px; width:84.9%; height:774px; z-index:4; background-color: #485D7E; border: 1px none #000000;}
div.sidebar{float:right; background-image: url(../images/sidebar.jpg); margin-top:1px; width:15.02%; height:809px; z-index:3; background-color: #6d81a1; border: 1px none #000000;}
div.foot{float:left; background-color:#40536F; width:100%; margin-top:1px;}
table.ban{border:0; width:100%;}

I hope i didnt break any forum rules or anything.erm maybe specifying a minimum-height: would help?Let me know if this helps (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=faq#hundredpercent">http://bonrouge.com/br.php?page=faq#hundredpercent</a><!-- m -->).Well, i tried giving min-height attributes to the content and sidebar div...not what i expected.

My server is back up, maybe you could have a look at it.

Link (<!-- m --><a class="postlink" href="http://www.posterised.com/fxsite/">http://www.posterised.com/fxsite/</a><!-- m -->)I think you'll have more luck using the Faux Columns Technique (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) highlighted at A List Apart.
 
You must log in or register to reply here.
Back
Top