Div Positioning and Layout

**Cyndre** · Apr 9, 2012 12:37

I'm trying to align my nav bar to sit directly above my third div (footer) with the h3 element aligned immediately above the nav div. I've so far got the following code:

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Pacific FX</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="container">
			<div id="content">
			</div> <!-- End Row content -->
			
			<div id="nav">
				<h3>Pacific Fx</h3>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Reel</a></li>
					<li><a href="#">Team</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">School</a></li>
				</ul>
			</div> <!-- End Navigation -->
			<div class="clearfooter"></div> <!-- Base Divider -->
		</div> <!-- End container -->
			<div id="footer">
			
			</div> <!-- End Footer -->
	</body>
</html>

Code:

html, body {
	height:100%;
	width:100%;
	float:left;
	margin:0 auto;
	}

#container {
	background: #444a48; /* Old browsers */
	background: -moz-linear-gradient(top,  #444a48 0%, #424b48 7%, #454b49 7%, #444d4a 11%, #474d4b 11%, #454e4b 14%, #4a5350 22%, #4b5453 22%, #4b5451 23%, #4d5653 23%, #4c5552 24%, #4d5655 24%, #525b58 31%, #555f5e 35%, #565e60 47%, #596362 57%, #606a69 67%, #66706f 71%, #656f6e 72%, #6d7776 77%, #6c7675 78%, #6e7975 78%, #6f7978 79%, #6e7975 79%, #6f7978 79%, #6f7a76 80%, #707a79 80%, #717b7a 80%, #727d79 82%, #747e7d 82%, #747f7b 83%, #76807f 83%, #848f89 91%, #84908c 91%, #8b9690 94%, #8b9793 94%, #8c9791 95%, #8d9a93 95%, #8f9a94 96%, #929f98 97%, #969f9a 98%, #97a49d 99%, #99a49e 100%, #9aa59f 100%, #cdd2ce 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444a48), color-stop(7%,#424b48), color-stop(7%,#454b49), color-stop(11%,#444d4a), color-stop(11%,#474d4b), color-stop(14%,#454e4b), color-stop(22%,#4a5350), color-stop(22%,#4b5453), color-stop(23%,#4b5451), color-stop(23%,#4d5653), color-stop(24%,#4c5552), color-stop(24%,#4d5655), color-stop(31%,#525b58), color-stop(35%,#555f5e), color-stop(47%,#565e60), color-stop(57%,#596362), color-stop(67%,#606a69), color-stop(71%,#66706f), color-stop(72%,#656f6e), color-stop(77%,#6d7776), color-stop(78%,#6c7675), color-stop(78%,#6e7975), color-stop(79%,#6f7978), color-stop(79%,#6e7975), color-stop(79%,#6f7978), color-stop(80%,#6f7a76), color-stop(80%,#707a79), color-stop(80%,#717b7a), color-stop(82%,#727d79), color-stop(82%,#747e7d), color-stop(83%,#747f7b), color-stop(83%,#76807f), color-stop(91%,#848f89), color-stop(91%,#84908c), color-stop(94%,#8b9690), color-stop(94%,#8b9793), color-stop(95%,#8c9791), color-stop(95%,#8d9a93), color-stop(96%,#8f9a94), color-stop(97%,#929f98), color-stop(98%,#969f9a), color-stop(99%,#97a49d), color-stop(100%,#99a49e), color-stop(100%,#9aa59f), color-stop(100%,#cdd2ce)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* IE10+ */
	background: linear-gradient(top,  #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444a48', endColorstr='#cdd2ce',GradientType=0 ); /* IE6-9 */
	font-family: Gill Sans, sans-serif;
	min-height: 100%;
	margin-bottom: -330px;
	position: relative;
	}
	
#content	{
	width:100%;
	height:600px;
	}
	
/** Pacific Fx Title **/
h3	{
	font-family: Gill Sans, sans-serif;
	color:#a5d8dc;
	padding:0 11px;
	font-size:60px;
	}
	
#nav {width: 100%; font-size:20px;}
#nav ul {margin: 0; padding: 0; float: left; }
#nav ul li {display: inline;}
#nav ul li a {float: left; text-decoration: none; color: white; padding: 0px 17px;}
#navul li a:visited {color: white; }
#nav ul li a:hover, #navigation ul li .current {color: #fff;}

.clearfooter	{
		height: 330px;
		clear:both;
		}
	
#footer		{
	height:330px;
	width:100%;
	position:relative;
	background-color: #262626;
	float:left;
	}

I just can't seem to get the nav bar and title aligned to that bottom dark grey bar. I've tried suing absolute positioning on the nav style with bottom set to 0 but it disappears off the page. I've searched the net trying to solve my problem but I can't seem to find anything that fixes it thus I'm thinking I have a more fundamental problem with how I've set out my css which I think is centered around my html / body style.
Anyone able to help me out?

**ralph.m** · Apr 9, 2012 18:10

Do you have an image of what you are aiming for? I can't work out what you want from your code and description.

**Cyndre** · Apr 9, 2012 18:27

I actually managed to crack my problem in the end, spent hours pouring over websites and the books I have but it was so simple and all connected to how I was setting up my containers.
I've actually managed to get myself to a good position from what I can tell but am now having difficulty with gradients.

I'm using a website to generate my gradient from an image file I uploaded (sliver of the background image I have aligned to the left. The idea is to create a continuation of the images gradient expanding right but atm I can't get them to align properly.

**TehYoyo** · Apr 9, 2012 19:16

Originally Posted by Cyndre

I actually managed to crack my problem in the end, spent hours pouring over websites and the books I have but it was so simple and all connected to how I was setting up my containers.
I've actually managed to get myself to a good position from what I can tell but am now having difficulty with gradients.

I'm using a website to generate my gradient from an image file I uploaded (sliver of the background image I have aligned to the left. The idea is to create a continuation of the images gradient expanding right but atm I can't get them to align properly.

Do you know how to create a repeating background? That can be far easier than creating a gradient and/or trudging through that globbly mess.

Like this.

~TehYoyo

User Tag List

Thread: Div Positioning and Layout

Thread Tools

Display

Div Positioning and Layout

Bookmarks

Bookmarks

Posting Permissions