100% height on multiple DIVs stacked vertically...

No replies

Tue, 2011-05-03 22:10

DamnShaneIsThatU

Offline

newbie

Last seen: 12 years 3 weeks ago

Timezone: GMT-5

Joined: 2011-05-03

Posts: 4

Points: 6

Hi all,

I've got most everything in place, but the trouble I've run into is getting each DIV (Landing Page, About, Reels and Contact) to be 100% height with an anchor so that it's centered vertically within the browser.

Can anyone provide any insight on how I might be able to achieve this?

Here's what it looks like currently- http://shaneermitano.com/jmp/

I've provided my code below. Thanks in advance!

-S

The HTML:

<!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>John-Michael Powell — Filmmaker — Los Angeles</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		<script type="text/javascript" src="jquery.js"></script>
        <script src="jquery_002.js" type="text/javascript"></script>
        <script src="jquery_003.js" type="text/javascript"></script>
<script type="text/javascript">
			$(document).ready(function () {
				$.localScroll.defaults.axis = 'y';
				$.localScroll();
			});
		</script>
</head>
<body>
	<div id="mainContainer">
 
		<div id="nameBkgrd"></div>
 
		<div id="divMenu">
			<ul id="menu">
				<li id="home1"><a href="#home"><span>Home</span></a></li>
				<li id="about1"><a href="#about"><span>About</span></a></li>
				<li id="reels1"><a href="#reels"><span>Reels</span></a></li>
				<li id="blog1"><a href="http://johnmichaelpowell.tumblr.com" target="_blank"><span>Blog</span></a></li>
				<li id="contact1"><a href="#contact"><span>Contact</span></a></li>
			</ul>
		</div>
 
		<div id="divFilmmaker">
			<a name="home" id="home" class="anchor"></a>
			<h2 class="headerHide">John-Michael Powell - Filmmaker</h2>
		</div>
 
		<div id="divAbout">
			<a name="about" id="about" class="anchor">
			<h2 class="headerHide">About JM</h2>
			<br /><br />
			<div id="divAboutCopy">
				<p>John-Michael Powell is an award winning editor from Los Angeles, California. He earned a B.S. in Radio-Television-Film from TCU, in Fort Worth, Texas. He spent two years as the lead Editor for National Banana, where he cut with Jerry Zucker (Airplane!, Ghost, First Knight) on the TV series Already in Progress as well as a series of PSAs featured on CNN called Attack at the Pump.'
					<br />
					<br />
					<br />
					In early 2009, John-Michael opened his own post-production house called Red Revolver Post at Santa Monica Studios. Recently he has cut the feature film Obselidia, winner of the Alfred P. Sloan Prize, the Excellence in Cinematography Award, and nominated for the Grand Jury Prize in the dramatic category at Sundance 2010.
					<br />
					<br />
					<br />
					John-Michael Powell is an award winning editor from Los Angeles, California. He earned a B.S. in Radio-Television-Film from TCU, in Fort Worth, Texas. He spent two years as the lead Editor for National Banana, where he cut with Jerry Zucker (Airplane!, Ghost, First Knight) on the TV series Already in Progress as well as a series of PSAs featured on CNN called Attack at the Pump.'
					<br />
					<br />
					<br />
					In early 2009, John-Michael opened his own post-production house called Red Revolver Post at Santa Monica Studios. Recently he has cut the feature film Obselidia, winner of the Alfred P. Sloan Prize, the Excellence in Cinematography Award, and nominated for the Grand Jury Prize in the dramatic category at Sundance 2010.
				</p>
			</div>
		</div>
 
		<div id="divReels">
			<a name="reels" id="reels" class="anchor"></a>
			<h2 class="headerHide">Reels</h2>
			<div id="divReelsCopy">
                	<div id="tubepress_embedded_object_1000916705">
					<center><iframe src="http://player.vimeo.com/video/18883798" width="600" height="338" frameborder="0"></iframe></center>
                    </div>
                    <a href="http://player.vimeo.com/video/18882888" id="tubepress_embedded_object_1000916705" rel="tubepress_vimeo_normal_1000916705">Clicking</a>
			</div>
		</div>
 
		<div id="divContact">
			<h2 class="headerHide">Contact JM</h2>
			<a name="contact" id="contact" class="anchor">
			<br /><br /><br /><br /><br />
			<div id="divContactCopy">
				<p>
					<i>e:</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">john@johnmichaelpowell.com</a><br />
					<br />
					<i>p:</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;818.203.6577<br />
					<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://facebook.com/johnmichaelpowell" target="_blank">facebook</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://twitter.com/#!/JM_Powell" target="_blank">twitter</a><br />
					<br />
					<br />
					<br />
					<i>management:</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dan defillipo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dave marken&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;patrick woods<br />
					<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">dan@pipeline-talent.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">[email protected]</a>
				</p>
			</div>
		</div>
 
	</div>
</body>
</html>

The CSS:

html {
	background: url(images/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height:100%;
}
body {
	color:#666;
	font-size:13px;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin:0 auto;
	padding:0;
	height:100%;
}
a {
	color: #362f2d;
	/*padding: 0 5px;*/
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
}
a:visited {
	color: #362f2d;/*padding: 0 5px;*/
}
a:hover {
	color: 362f2d;/*padding: 0 5px;*/
}
h1 {
	width: 600px;
	border: none;
	padding: 35px 0 0 0;
}
h2 {
	font-size: 24px;
	font-family: verdana, helvetica, arial, sans-serif;
	color:#444444;
	font-weight: 400;
	padding: 0 0 10px;
}
h3 {
	font-size:14px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color:#362f2d;
	font-weight: 700;
	text-transform:uppercase;
	margin:0;
	padding:8px 0 8px 0;
}
p {
	color:#362f2d;
	font-size: 13px;
	line-height: 18px;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 0 0 10px;
	margin: 20px 0 10px 0;
}
img {
	border:none;
}
.clear {
	clear: both;
}
 
#menu {
	background: url(images/JMP-Filmmaker-Nav.png) no-repeat;
	width: 500px;
	height: 34px;
	margin: 25px auto;
	padding: 0;
	position: fixed;
	left: 0;
	right: 0;
	top:0;
	z-index: 500;
}
#menu span {
	display: none;
}
#menu li, #menu a {
	height: 34px;
	display: block;
}
#menu li {
	float: left;
	list-style: none;
	display: inline;
}
 
#home1 {
	width: 100px;
}
#about1 {
	width: 86px;
}
#reels1 {
	width: 97px;
}
#blog1 {
	width: 74px;
}
#contact1 {
	width: 143px;
}
#home1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) 0px -34px no-repeat;
	outline: none;
}
#about1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) -100px -34px no-repeat;
	outline: none;
}
#reels1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) -186px -34px no-repeat;
	outline: none;
}
#blog1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) -283px -34px no-repeat;
	outline: none;
}
#contact1 a:hover {
	background:url(images/JMP-Filmmaker-Nav.png) -357px -34px no-repeat;
	outline: none;
}
 
/*******************************************************************************************************************/
#mainContainer{
	margin:0 auto;
	width:600px;
	/*border:solid 1px #ffffff;
	padding-bottom:20px;*/
	height:100%;
	/*border:solid 1px #ff0000;*/
}
#nameBkgrd {
	width: 918px;
	height:129px;
	top:40%;
	margin-left:-159px;
	position:fixed;
	padding: 0;
	background: url('images/name.png') no-repeat center center;
	/*border:solid 1px #ff0000;*/
}
#divFilmmaker {
	width: 600px;
	height:100%;
	min-height:442px;	/*css file for IE6 should have height:442px instead */
	background:url(images/JPM-Filmmaker-Landing.png) no-repeat center top;
	margin: 0 auto;
	margin-top:70px;	/*border:solid 1px #ff0000;*/
}
#divAbout {
	width: 600px;
	height:100%;
	min-height:433px;	/*css file for IE6 should have height:433px instead */
	background:url(images/JPM-Filmmaker-About.png) no-repeat center top;
	margin: 0 auto;
	/*border:solid 1px #ff0000;*/
}
#divAboutCopy{
	position:relative;
	width:600px;
	margin:0 auto;
	/*border:solid 1px #ff0000;*/
}
#divReels {
	width: 600px;
	height:100%;
	min-height:482px;	/*css file for IE6 should have height:442px instead */
	background:url(images/JPM-Filmmaker-Reels.png) no-repeat center top;
	margin: 0 auto;
	/*border:solid 1px #ff0000;*/
}
#divReelsCopy{
	position:relative;
	width:600px;
	margin:0 auto;
	/*border:solid 1px #ff0000;*/
}
#divBlog {
	width: 600px;
	height:100%;
	min-height:433px;	/*css file for IE6 should have height:433px instead*/
	background:url(images/JPM-Filmmaker-Blog.png) no-repeat center top;
	margin: 0 auto;
	/*margin-top:100px;*/
	/*border:solid 1px #ffabf0;*/
}
#divBlogCopy{
	position:relative;
	width:600px;
	margin:0 auto;
	/*border:solid 1px #ff0000;*/
}
#divContact {
	width: 600px;
	height:100%;
	min-height:442px;	/*css file for IE6 should have height:442px instead */
	background:url(images/JPM-Filmmaker-Contact.png) no-repeat center top;
	margin: 0 auto;
	/*border:solid 1px #ffde00;*/
}
#divContactCopy{
	position:relative;
	width:600px;
	margin:0 auto;
	/*border:solid 1px #ff9000;*/
}
.anchor{
	padding-top:70px;
}
.headerHide  {
	position:absolute;
	left:-4000px;
}

Tags:

Beginners CSS Questions

100% height on multiple DIVs stacked vertically...

User login

Navigation