footer and wrapper alignment

[j3ff3]

Hi,

First post, but lurked for a while!

Probably something really simple, but my footer doesn't seem to want to align with its containing div. Its slightly off to the right.

I don;t really understand why - the background image is exactly 850px, as is the div.

Just to let you know, i've put borders around the other elements, just to make the design easier, but not the footer.

@charset "utf-8";
/* CSS Document */

#wrapper {
  width:850px;
  height:650px;
  margin:0 auto; /* this centers the page */
  padding:0;
  border-style:solid;
  border-width:1px;
  border-bottom-style:none;
  border-top-style:none;
}

#header {
	background:url(navbar.png);
	background-position: left bottom;
	background-repeat:no-repeat;
	height:200px;
	border-style:solid;
	border-width:1px;
	
}

#logo {
	background:url(logo.png);
	width:191px;
	height:82px;
	margin:55px 34px;
	padding:0px;
	border-style:solid;
	border-width:1px;
}

#contentnav {
	width:150px;
	height:400px;
	float:left;
	margin:16px;
	border-style:solid;
	border-width:1px;
}

#contentmain { 
	background:url(content.png);
	background-repeat:no-repeat;
	width:600px;
	height:400px;
	float:right;
	margin:16px;
	border-style:solid;
	border-width:1px;
}

#footer {
	clear:both;
	background:url(footer.png);
	background-repeat:no-repeat;
	background-position:left bottom;
	width:850px;
	height:200px;
	margin:0px;
	border-style:solid;
	border-width:1px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="hisstylesheet.css" rel="stylesheet" type="text/css" />

<title>Untitled Document</title>

</head>

<body>

	<div id="wrapper">
        <div id="header">
        	<div id="logo">
            </div><!-- end #logo -->
        
		</div><!-- end #header -->
        
        <div id="contentnav">
        
        </div><!-- end #contentnav -->
        
        <div id="contentmain">
        
        </div><!-- end #contentmain -->
        
        <div id="footer">
        
        </div><!-- end #footer -->
        
	</div><!-- end #wrapper -->
</body>



</html>

Here is the image.



Its really getting on my nerves!!!!!

Thanks,

Jeff

[TheServant]

Remove your #wrapper border. Or play around by changing your #wrapper to 852px, or your footer/header to 848px. You need to take borders into account with widths.

And the footer does have a border.

[j3ff3]

so it does! thanks for the quick reply.

let me post a picture with the elements outlined. it makes the problem a bit clearer



see?

the #wrapper overlaps with the #footer.....

I'll try taking all the borders off like you suggested though.

cheers

[TheServant]

Try give the #wrapper a overflow: hidden; property.

Oh, and also, you have set your #wrapper height to 650px which does not add up with the 200px header, 400px content, and 200px footer. I suggest you take out all the heights to make it more fluid.