Basically I have a header at the top of the page and a footer at the bottom of the page in Divs and then a content Div sitting between them. All three of these divs are 750px wide and need to be center aligned in the browser. (This I can do). However, I want the header and footer to be a fixed position - the header always at the top center of the screen and the footer always at the bottom center of the screen and then the content div scrolling underneath them. (see attatched file)
I thought I would have to use absolute positioning but I don't know how I would get the divs to be centered align using that.
It would be great if someone can point me in the right direction
I have used that basic layout of Stu Nicholls' a couple of times, but it does rely on the full width to work as the scrollbar is actually on the content div and not the body. If you constrain the width, the scrollbar will no longer be on the left screen edge.
However, this can be done with a little extra trickery by using nested divs that are the correct width and centred within the outer divs, and whether it works for you will depend on what backgrounds you want to use. See if this example will work for you :
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
max-height: 100%;
overflow: hidden;
}
body {
position: relative;
background-image: url(images/background.gif);
background-position: center top;
background-repeat: repeat-y;
}
p {
margin-bottom: 1em;
}
#headerwrap {
position: absolute;
width: 100%;
height: 100px;
right: 18px;
}
#header {
background-color: #457AAC;
color: #FFFFFF;
width: 730px;
margin: 0 auto;
height: 100px;
border-left: 18px solid #FFF;
padding: 0 10px;
}
#contentwrap {
height: 100%;
max-height: 100%;
overflow: auto;
}
#content {
width: 730px;
margin: 0 auto;
padding: 100px 10px 50px;
}
#footerwrap {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
right: 18px;
}
#footer {
background-color: #457AAC;
color: #FFFFFF;
width: 730px;
margin: 0 auto;
height: 50px;
border-left: 18px solid #FFF;
padding: 0 10px;
}
-->
</style>
</head>
<body>
<div id="headerwrap">
<div id="header">
<p>Header</p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hedrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
This relies on a background image (with an 18px offset section on the right - attached to this post) on the body to provide the content background, and left borders on the header and footer divs, coloured the same as the body background, to counteract the 18px shift to make room for the full height scrollbar. It does have a problem when the screen width is narrower than the layout, but is still fine on a 800x600 screen.
Thanks very much. I will be able to use that to do what I need, but does that work in IE7 as well? It works great in Firefox, but in IE7 it looks like the attatched file.
Reply With Quote
I will be able to use that to do what I need, but does that work in IE7 as well? It works great in Firefox, but in IE7 it looks like the attatched file.
Bookmarks