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
3  2478 
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.
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
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: J.Storta |
last post by:
On my site, I have created a footer that is simply a shaded box with a
character.
Using Server Side Includes, I use this footer on every page. On some
pages it loads fine, on other pages...
|
by: Cruzweb |
last post by:
http://storm-enterprises.net/cgi/contact.php is the design
Works fine in ie, but in firefox the content <div> expands behind the footer <div> and through the wrapper <div> background. Any help is...
|
by: John Crowley |
last post by:
I keep running into this over and over again...
I want a block server control that renders a header and footer, and child
controls in between.
But I don't want a templated control, for the...
|
by: Saket Mundra |
last post by:
I have a webform in which i have used Image Control for displaying Header &
footer. I have noticed that when i open the same webform in differnet IE
windows having different settings for toolbars,...
|
by: sonya11 |
last post by:
hi all,
sorry I realize the topic is well known, anyway is there a way without
using javascript to have a footer always under a 3 column layout with
Absolute Positioning ?
I don' t want to...
|
by: Mercy |
last post by:
Hey All,
This is probably a easy question, but I'm really stuck. I have a
command console program written in C++, that I want to convert it to C#
to make it into a windows app. The problem is...
|
by: xkeops |
last post by:
Thinking of creating a website, most of the pages will have a general
toolbar
menu, a content and a footer.
The content will be the only one who's gonna change but the rest
(header,footer)
will...
|
by: markthedoc |
last post by:
Hi
I've got a problem with excess space under my footer.
I want the page to finish at the bottom of my footer, but the background image of the body tag carries on until it reaches the bottom of...
|
by: issentia |
last post by:
I'm working on this site:
http://www.essenceofsoy.com/redesign/index2.html
and I'm having a few problems with getting the layout exactly right.
1) When the menu items are rolled over, they...
|
by: Noorain |
last post by:
I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
