100% height with long Content 1

dagger2002 · Sep 19, 2008

Hello all I have a template that I am building for the cms joomla,

http://www.joomla.org,

but I am having an issue with the content going passed the footer.

Also all code and CSS passes w3c Validation

here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en-gb" lang="en-gb" >

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>SBCSS Dev</title>

  <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/caption.js"></script>


<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/sbcss_test/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/sbcss_test/css/text.css" type="text/css" />

</head>

<body>
	<div id="wrapper">
		<div id="header">
			<img src="/templates/sbcss_test/images/hdr_supt.jpg" hspace="0" vspace="0" alt="SBCSS Header" />
		</div>

		<div id="leftCol">
		      		<div class="moduletable_menu">
					<ul class="menu"><li id="current" class="active item1"><a href="[URL unfurl="true"]http://sbcss.joomla.dev/"><span>Home</span></a></li><li[/URL] class="item2"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=2"><span>Superintendent's Office</span></a></li><li class="item3"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=3"><span>Administrative Services</span></a></li><li class="item4"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=4"><span>Business Services</span></a></li><li class="item5"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=5"><span>Educational Support Services</span></a></li><li class="item6"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=6"><span>Human Resources</span></a></li><li class="item7"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=7"><span>SELPAs</span></a></li><li class="item9"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=9"><span>Student Services</span></a></li><li class="item11"><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=11"><span>Board of Education</span></a></li></ul>		</div>

	
		  	</div>

			<div id="mainContent">
				<div class="componentheading">
	SBCSS Dev</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
					<div>
		

<table class="contentpaneopen">
<tr>
		<td class="contentheading" width="100%">
					Lorem Ipsum			</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/index.php?view=article&amp;id=3:lorem-ipsum&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,
titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,
location=no'); return false;" rel="nofollow"><img src="/images/M_images/pdf_button.png" alt="PDF"  /></a>	</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/index.php?view=article&amp;id=3:lorem-ipsum&amp;tmpl=component&amp;print=1&amp;page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,
titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,
location=no'); return false;"><img src="/images/M_images/printButton.png" alt="Print"  /></a>	</td>

	
		<td align="right" width="100%" class="buttonheading">
	<a href="/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovL3NiY3NzLmpvb21sYS5kZXYvaW5kZXgucGhwP3ZpZXc9YXJ0aWNsZSZp
ZD0zOmxvcmVtLWlwc3Vt" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=300,menubar=yes,
resizable=yes'); return false;"><img src="/images/M_images/emailButton.png" alt="E-mail"  /></a>	</td>
		</tr>
</table>
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<div id="lipsum"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam rhoncus. Etiam eu lectus. Suspendisse potenti. Aenean tincidunt neque nec quam. Etiam suscipit, sem a interdum elementum, dolor orci condimentum tortor, quis gravida tortor diam ut mauris. Curabitur erat metus, accumsan a, porttitor nec, semper a, magna. Proin congue justo ut ipsum. Maecenas rutrum justo vitae turpis. Pellentesque non ante. Etiam quam. </p> <p>Sed accumsan suscipit dui. Nam interdum massa consequat eros tristique malesuada. Fusce id eros non orci egestas convallis. Vestibulum ultrices lacus ut nunc. Ut viverra turpis vitae erat. Praesent sit amet purus a purus condimentum ultricies. Maecenas auctor porttitor diam. Donec non enim. Vivamus molestie vestibulum nisl. Morbi sed sapien. Donec nisi neque, accumsan ut, ullamcorper non, dignissim eu, mauris. </p> <p>Morbi rhoncus. Etiam tellus. Aenean vulputate purus quis nisi. Sed scelerisque imperdiet eros. Mauris dapibus risus in purus. Pellentesque sollicitudin leo a purus. Phasellus tellus. Cras luctus turpis at massa. Nunc bibendum eleifend erat. Etiam ut felis at felis molestie fringilla. Mauris nec ipsum ac tortor scelerisque placerat. </p> <p>Suspendisse potenti. Morbi sed velit quis magna convallis commodo. Aenean tempus ullamcorper lectus. Ut vel quam. Nullam imperdiet. Cras adipiscing, elit vestibulum mattis aliquet, mauris eros scelerisque diam, id scelerisque metus velit ut justo. Nulla mattis velit at sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque mattis neque quis ante. Sed egestas erat id tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis ligula nec mauris. Aliquam bibendum. Mauris quis felis. Phasellus vitae mauris id enim dictum accumsan. Aliquam bibendum ultrices erat. Etiam neque ipsum, elementum et, sollicitudin in, hendrerit vitae, neque. </p> <p>Vestibulum varius lacus sit amet neque. Nam a nulla a lacus sodales ullamcorper. Vestibulum ac felis tincidunt neque ullamcorper eleifend. Cras purus ante, pulvinar eget, pulvinar at, sollicitudin non, mauris. Morbi interdum. Praesent pellentesque cursus justo. Mauris fringilla, tellus eu iaculis cursus, felis dolor mattis erat, vel porttitor quam neque vel felis. Phasellus sed eros. Vivamus molestie, elit eu accumsan rutrum, diam leo consectetuer nulla, nec adipiscing arcu velit nec elit. Sed eu velit. </p> <p>Proin egestas imperdiet sapien. Pellentesque varius. Vivamus interdum nulla. Morbi suscipit blandit risus. Aliquam dolor tellus, convallis ut, gravida et, pretium eu, quam. Nulla facilisi. Suspendisse nunc velit, tempus sit amet, ultricies quis, elementum at, felis. Pellentesque mattis tellus at quam. Quisque quis velit. Pellentesque vestibulum. Cras libero diam, lobortis quis, vehicula vel, tempus id, urna. Cras convallis pede. Pellentesque sagittis. Quisque turpis nulla, tincidunt eu, semper a, pulvinar id, leo. Integer orci. Donec in ligula sed lectus molestie tempus. </p> <p>Suspendisse viverra interdum ipsum. Mauris malesuada. Phasellus fermentum consequat odio. In lectus purus, tincidunt non, interdum sit amet, euismod quis, massa. Nullam ac felis sit amet enim commodo tincidunt. Curabitur mattis, sem et placerat aliquam, metus dolor euismod sapien, ac convallis lorem neque at mi. Integer porta nunc non nunc. Morbi adipiscing accumsan nunc. Aliquam accumsan, ligula quis dictum adipiscing, lorem elit porttitor est, quis venenatis massa lorem non enim. Morbi non metus. Mauris diam. Vestibulum ut purus vitae arcu fermentum ultrices. Vivamus eros lacus, ultrices ut, sollicitudin eget, gravida non, orci. Maecenas non odio. Duis posuere auctor leo. Nulla eget felis. Aenean in tellus. Nulla lacus lorem, pretium non, interdum id, viverra sit amet, mi. </p> <p>Pellentesque at dui in erat fermentum dictum. Cras id lectus ac augue dictum faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sem. Sed eget ligula ut arcu commodo cursus. Suspendisse in urna. Sed porta. In viverra metus vel dolor. Etiam elit libero, malesuada sodales, adipiscing et, pharetra sed, sapien. Pellentesque pede dui, molestie vitae, scelerisque non, mollis id, sem. Donec massa eros, porttitor vitae, dignissim non, dignissim non, eros. Fusce condimentum pretium lacus. </p> <p>Curabitur ornare tincidunt quam. Aenean commodo nunc sit amet nulla. Quisque lectus elit, adipiscing eu, malesuada eu, ornare eu, lectus. Sed convallis nunc at dui feugiat laoreet. Quisque ut diam. Etiam a odio vel ante consequat suscipit. Donec nisl. Duis tincidunt, nibh a hendrerit hendrerit, tellus justo dapibus arcu, in semper purus lorem eu odio. In ac risus sit amet lacus ornare scelerisque. Maecenas ullamcorper. Morbi viverra. Praesent viverra, felis at semper dictum, massa nibh ultricies justo, quis mollis purus nibh a risus. Integer ullamcorper dolor at dui. Aliquam laoreet convallis erat. Nulla convallis ligula in nulla. Aliquam elementum felis non sem. </p> <p>Pellentesque mauris diam, commodo vehicula, hendrerit porttitor, feugiat a, arcu. Fusce sed justo vitae massa pellentesque euismod. Praesent dictum dolor vel eros. Quisque lorem purus, lacinia quis, porttitor nec, ornare vitae, tellus. Suspendisse arcu. Donec sodales ornare justo. Morbi dapibus vehicula enim. Fusce vehicula. In hac habitasse platea dictumst. Proin consectetuer tincidunt tortor. Vestibulum eget metus. In non erat. Integer erat ipsum, malesuada eget, congue non, tempus eget, tortor. Maecenas vulputate felis sodales mauris. </p></div></td>

</tr>



</table>
<span class="article_separator">&nbsp;</span>
		</div>
		</td>
</tr>

<tr>
	<td valign="top">
		<table width="100%"  cellpadding="0" cellspacing="0">

		<tr>
										<td valign="top" width="50%" class="article_column">
				
<table class="contentpaneopen">
<tr>
		<td class="contentheading" width="100%">
					Welcome to SBCSS Dev			</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/index.php?view=article&amp;id=1:welcome-to-sbcss-dev&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,
titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,
location=no'); return false;" rel="nofollow"><img src="/images/M_images/pdf_button.png" alt="PDF"  /></a>	</td>

	
		<td align="right" width="100%" class="buttonheading">
	<a href="/index.php?view=article&amp;id=1:welcome-to-sbcss-dev&amp;tmpl=component&amp;print=1&amp;page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,
titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,
location=no'); return false;"><img src="/images/M_images/printButton.png" alt="Print"  /></a>	</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovL3NiY3NzLmpvb21sYS5kZXYvaW5kZXgucGhwP3ZpZXc9YXJ0aWNsZSZp
ZD0xOndlbGNvbWUtdG8tc2Jjc3MtZGV2" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=300,menubar=yes,
resizable=yes'); return false;"><img src="/images/M_images/emailButton.png" alt="E-mail"  /></a>	</td>
		</tr>
</table>
<table class="contentpaneopen">



<tr>
<td valign="top" colspan="2">
This is a development of dev</td>
</tr>

<tr>
	<td colspan="2"  class="modifydate">
		Last Updated ( Monday, 08 September 2008 17:03 )
	</td>
</tr>


</table>

<span class="article_separator">&nbsp;</span>
				</td>
										<td valign="top" width="50%" class="article_column column_separator">
								</td>
						</tr>
		</table>
	</td>
</tr>

</table>

			</div>

	  		<div id="rightCol">
			      

			</div>

		<div id="footer">
      <!-- jdoc:include type="modules" name="footer" style="raw" /> -->
   		San Bernardino County Superintendent of Schools * 601
North E Street * San Bernardino, California 92410 * Phone: (909)
386-2784
		Use of this site signifies your agreement to our Terms
of Use. All site content is copyright (c) 2008 SBCSS All rights
reserved. For site-related problems, please contact our webmaster.
	  </div>

	</div>

</body>
</html>

Here is the css:

template:

Code:

html , body
{
	width: 100%;
	height: 100%;
	display: block;
	margin: 0px;
}
body{
	background-color: 	#CCC;

}

#wrapper
{
	background-color: #FFF;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 1000px;
	height: 100%;
	min-height: 750px;
}

#header
{
	width: 100%;
	height: 150px;
	background: #666;
}

#bodyWrap
{
	width: 100%;
	height: 100%;
	background-color: #FFF;
}

#leftCol
{
	width: 200px;
	height: 100%;
	background-color: #134EAA;

	float: left;
}

#rightCol
{
	width: 200px;
	height: 100%;
	background-color: #FFC;

	float: right;
}

#mainContent
{
	background-color: #FFF;
	width: 600px;
	height: 100%;
	float: left;
}
#footer
{
	clear: both;
	width: 100%;
	height: 50px;
	background-color: #999;
}

text:

Code:

body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	font-size: 100%;
	line-height: 101%;
}

#leftCol{
	font-size: 125%;
	line-height: 121%;
	
}

#leftCol .moduletable_menu
{
	margin-left: -20px;
}

#leftCol .moduletable_menu h3
{
	margin-left: 30px;
}


#leftCol ul li, #leftCol ol li
{
	list-style-position: outside;
	list-style-type: none;
	margin-bottom: 10px;
	margin-left: -20px;

}

#leftCol .item11
{
	border-color: #FFC;
	border-width: 2px 0px 2px 0px;
	border-style: solid;
	border-spacing: 50px;
}

#leftCol a:link{
	color: #FFC;
	text-decoration: none;
	padding-left: 15px;
	display: block;
}

#leftCol a:hover
{
	color: #039;
	text-decoration: none;
	background-color: #CCF;
	display: block;
	padding-left: 15px;
	padding-top: 5px;
	padding-bottom: 15px
	
}

#leftCol a:active{
	color: #FFC;
	text-decoration: none;
	padding-left: 15px;
	display: block;
}

#leftCol a:visited{
	color: #FFC;
	text-decoration: none;
	padding-left: 15px;
	display: block;
}

Vragabond · Sep 19, 2008

Your #mainContent has a defined width and height and no specification on what to do when there is an overflow of content in it. By default, when the content exceeds the size of the container, browsers (apart from IE6, which does it wrong) spill the content out of the container. You can get rid of that by changing the overflow property, making the excess content hidden or adding scrollbars to your window, or by removing size limitations.

Removing the width will not do you much good, because excess content will never push the container beyond the horizontal physical limitations of the browser. However, removing the height will allow content to expand the container beyond the physical limitations of the browser window as far as needed.

That's why I think you should start with removing the height of #mainContent. If that does not work, see if you need to remove any other heights as well.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

dagger2002 · Sep 25, 2008

That brings up a different problem. But fixes the first.

Now the left and right colums dont go all the way to the bottom.

any thoughts?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

100% height with long Content 1

dagger2002

Programmer

Vragabond

Programmer

dagger2002

Programmer

Similar threads

Part and Inventory Search

Sponsor