Simple HTML/CSS layout issue

Mada_Milty · Mar 14, 2010

Good Day All,

I am trying to create a simple CSS layout where I have a main column of content. I'd like to set it so that if there isn't enough content, the containing DIV still fills the viewport, and if there is too much content, the div resizes to the height of the content.

You can view the page here, and my source is below:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<?php include('includes/php/suntime.php');?> <!-- Script to categorize server time -->
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
		<title>Home - davidlayzell.com</title>
		<link rel="stylesheet" type="text/css" href="./includes/css/styles.css" >
		<script src="./includes/js/menu_fader.js" type="text/javascript"></script>
		<!-- Script containing functions for showing resumes menu, and fading menu after idle period -->
	</head>
	<body id="<?php echo($style); ?>"> <!-- Sets the body's ID to a server time category, showing different backgrounds -->		
		<div id="container">			
			<div id="side">
				<script type="text/javascript" src="http://output84.rssinclude.com/output?type=js&id=73878&hash=bd71cd4dcb39bfd29967a0c11757b066"></script>
				<!-- Script containing functions to embed an RSS feed of my twitter account. Twitter.com/dlayzell -->
			</div>
			<div id="main">
				<div id="inner">
					<div id="header">Meet David Layzell</div>
					<div id="chron">
						<?php echo(date("l\, F dS\, Y h:i A")); ?> <!-- Command outputting current server date/time -->
					</div>
					<div id="video">
						<object width="425" height="344">
							<param name="movie" value="http://www.youtube.com/v/tJ66rU_DcOg&hl=en_US&fs=1&"></param>
							<param name="allowFullScreen" value="true"></param>
							<param name="allowscriptaccess" value="always"></param>
							<embed src="http://www.youtube.com/v/tJ66rU_DcOg&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
						</object>
					</div>
					<div id="menubar">
						<span id="resumewrap">
							<a href="./resumes/dev" onmouseover="show_resume_menu ();" alt="Resumes">Resumes</a> - 
							<span id="resumes" onmouseout="set_fader(100);">
								<a href="./resumes/dev" onmouseover="set_opacity();" onmouseout="set_fader(5000);" alt="Developer">Developer</a><br><hr>
								<a href="./resumes/sysadm" onmouseover="set_opacity();" onmouseout="set_fader(5000);" alt="Sys Admin">System Admin</a>
							</span>
						</span>
						<a href="./Portfolio" onmouseover="set_fader(100);" alt="Portfolio">Portfolio</a> - 
						<a href="./testimonials" onmouseover="set_fader(100);" alt="Testimonials">Testimonials</a> -
						<a href="./projects" onmouseover="set_fader(100);" alt="Projects">Projects</a> -
						<a href="./contact" onmouseover="set_fader(100);" alt="Contact">Contact</a>							
					</div>
					<div style="margin: 0px auto 25px auto;">FILLER TEXT GOES HERE</div>
					<div id="footer">Hosted by <a href="http://www.bravenet.com/">Bravenet</a> | Contact <a href="mailto:david_layzell@hotmail.com">Webmaster</a> | Copyright © David Layzell</div>
				</div>
			</div>			
		</div>
	</body>
</html>

Code:

body {	
	font: 100%;
	height: 100%;	
	margin: 0px;
	padding: 0px;
}
#container {	
	margin: 0px;
	max-width: 1680px;
	min-width: 994px;
}
#container #side {	
	float: left;
	position: fixed;
		left: 15px;
		top: 20px;
	width: 300px;
}
#container #side div{	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius:5px;
}
#container #main {	
	min-height: 95.25%;
	min-width: 678px;
	margin: 0px;
	max-width: 1335px;
	position: absolute;
		bottom: 0px;
		left: 315px;
		right: 0px;
		top: 0px;
}
#container #main #inner { /* This, or the parent DIV needs work for height in all browsers */
	background-color: white;	
	margin: 0px 15px;	
	min-height: 100%;  /* Note: This could use work, but looks good enough for now 	*/
	min-width: 648px;		
	padding: 15px;
	position: absolute;
		bottom: 0px;
		left: 15px;
		right: 15px;
		top: 0px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}			
#container #main #inner #header { /*Needs work on width for IE7 */
	border: 1px solid black;
	color: #0084B4;
	font: bold 1.5625em Arial, Helvetica, sans-serif;	
	height: 35px;	
	padding: 5px;	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#container #main #inner #chron {
	color: gray;
	font: 0.625em Arial, Helvetica, sans-serif;	
	text-align: right;
}
#container #main #inner #video {text-align: center;}
#container #main #inner #menubar { /*Needs work on width for IE7 */
	background-color: #0084B4;
	color: #FFFFFF;
	font: 0.9375em Arial, Helvetica, sans-serif;				
	height: 25px;
	line-height: 25px;
	padding: 5px;
	text-align: center;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;				
}
#container #main #inner #menubar a{text-decoration: none;}
#container #main #inner #menubar a:link{color: #FFFFFF;}
#container #main #inner #menubar a:visited{color: #FFFFFF;}
#container #main #inner #menubar a:hover{color: yellow;}
#container #main #inner #menubar a:active{color: red;}
#container #main #inner #menubar #resumewrap {position: relative;}
#container #main #inner #menubar #resumewrap #resumes{
	background-color: #0084B4;
	border: 2px solid white;
	padding: 5px;
	position: absolute;	
		top: 15px;
		left: 5px;
	visibility: hidden;
	width: 110px;
}
#container #main #inner #footer{	
	background-color: #D3D3D3; /*lightgray;*/
	font: 0.75em Arial, Helvetica, sans-serif;
	height: 15px;
	padding: 5px;
	position: absolute;
		bottom: 15px;
		left: 15px;
		right: 15px;
	text-align: center;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#container #main #inner #footer a:link{color: blue;}
#container #main #inner #footer a:visited{color: blue;}
#container #main #inner #footer a:hover{color: gray;}
#container #main #inner #footer a:active{color: red;}
/***************************************************************************
					Time-Sensitive Background IDs
***************************************************************************/
#sunset {background: url('../../images/sunset.jpg') repeat-x #BE7001;}
#sunrise {background: url('../../images/sunrise.jpg') repeat-x #000000;}
#day {background: #0A6FBF url('../../images/day.jpg') repeat-x -20px 0px;}
#night {background: url('../../images/night.jpg') repeat-x #021134;}

With this code, I have a DIV that does fill the viewport, but the content overflows, printing behind my footer, and spilling out of the container. With some tweaking, I can get the content contained properly, but the div will fail to fill the viewport height when empty.

I'm suspicious of all the positioning I've used, and I will be playing with these values until I've got my answer, one way or another.

Thanks for any input,

Milty

Mada_Milty · Mar 15, 2010

I got it!

It was as I suspected; the absolute positioning on the #main and #inner DIVs was the problem. My CSS now looks like this:

Code:

html, body {	
	font: 100%;
	height: 100%;	
	margin: 0px;
	padding: 0px;
}
#container {	
	height: 100%;
	margin: 0px;
	max-width: 1680px;
	min-width: 994px;
}
#container #side {	
	float: left;
	position: fixed;
		left: 15px;
		top: 20px;
	width: 300px;
}
#container #side div{	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius:5px;
}
#container #main {		
	height: 100%;
	min-width: 678px;
	margin: 0px 0px 0px 315px;
	max-width: 1335px;	
}
#container #main #inner {
	background-color: white;	
	margin: 0px 15px;
	min-height: 100%;
	min-width: 630px;		
	padding: 15px 15px 0px 15px; 
	position: relative;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;	
}			
#container #main #inner #header {
	border: 1px solid black;
	color: #0084B4;
	font: bold 1.5625em Arial, Helvetica, sans-serif;	
	height: 35px;	
	padding: 5px;	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#container #main #inner #chron {
	color: gray;
	font: 0.625em Arial, Helvetica, sans-serif;	
	text-align: right;
}
#container #main #inner #video {text-align: center;}
#container #main #inner #menubar {
	background-color: #0084B4;
	color: #FFFFFF;
	font: 0.9375em Arial, Helvetica, sans-serif;				
	height: 25px;
	line-height: 25px;
	padding: 5px;
	text-align: center;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;				
}
#container #main #inner #menubar a{text-decoration: none;}
#container #main #inner #menubar a:link{color: #FFFFFF;}
#container #main #inner #menubar a:visited{color: #FFFFFF;}
#container #main #inner #menubar a:hover{color: yellow;}
#container #main #inner #menubar a:active{color: red;}
#container #main #inner #menubar #resumewrap {position: relative;}
#container #main #inner #menubar #resumewrap #resumes{
	background-color: #0084B4;
	border: 2px solid white;
	padding: 5px;
	position: absolute;	
		top: 15px;
		left: 5px;
	visibility: hidden;
	width: 110px;
}
#container #main #inner #footer{	
	background-color: #D3D3D3;
	font: 0.75em Arial, Helvetica, sans-serif;
	height: 15px;
	padding: 5px;	
	position: absolute;
		bottom: 15px;
		left: 15px;
		right: 15px;		
	text-align: center;	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#container #main #inner #footer a:link{color: blue;}
#container #main #inner #footer a:visited{color: blue;}
#container #main #inner #footer a:hover{color: gray;}
#container #main #inner #footer a:active{color: red;}
/***************************************************************************
					Time-Sensitive Background IDs
***************************************************************************/
#sunset {background: url('../../images/sunset.jpg') repeat-x #BE7001;}
#sunrise {background: url('../../images/sunrise.jpg') repeat-x #000000;}
#day {background: #0A6FBF url('../../images/day.jpg') repeat-x -20px 0px;}
#night {background: url('../../images/night.jpg') repeat-x #021134;}

I've added an HTML selector with the same properties as the body selector, removed the absolute positioning to the #inner and #main divs, and added height properties to all the parent containers.

I have only one problem that remains. The #inner div is ~15px too tall for the view port when emptied of the filler text content. I'm not sure what is causing this, but I can live with it for now, unless anyone can suggest a fix?

Thanks again,

Milty

Log in or Sign up

Simple HTML/CSS layout issue

Mada_Milty MajorGeek

Mada_Milty MajorGeek