www.webdeveloper.com
Results 1 to 8 of 8

Thread: Center align divs with absolute positioning

  1. #1
    Join Date
    Oct 2003
    Posts
    205

    Center align divs with absolute positioning

    Hi,

    I'm having a problem trying to figure this out.

    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

    thanks

    Phil
    Attached Images Attached Images

  2. #2
    Join Date
    Apr 2006
    Posts
    58
    what id do is make a outer div which holds your footer, main content and header, then centre align your outer div with margin: 0 auto;

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I build for: Firefox and tweak for IE

  4. #4
    Join Date
    Oct 2003
    Posts
    205
    Thanks for the suggestions guys.

    Looking at the link WebJoel posted it is similar to this:

    http://www.cssplay.co.uk/layouts/body2.html

    except that there is no left hand section and instead of the site being 100% width I want it to be fixed at 750px and centered.

    I have tried the following:

    CSS
    Code:
    html {
    height:100%; 
    max-height:100%;  
    padding:0; 
    margin:0; 
    border:0; 
    font-size:76%; 
    font-family: trebuchet ms, tahoma, verdana, arial, sans-serif; 
    background:#fff url(clown.jpg) -18px 0 no-repeat; 
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden; 
    /* */ }
    
    body {  height:100%; max-height:100%; overflow:hidden; padding:0; margin: 0; border:0; text-align: center; }
    
    #container{width: 750px; margin: 0 auto; height: 100%; background-color: red;}
    
    #content { display:block; height:100%; max-height:100%; overflow:auto; padding: 0; position:relative; z-index:3; padding: 0 0 0 0;}
    
    #head { position:fixed; margin:0; top:0; right:18px; display:block; width:750px; height:100px; background:url(topclown.jpg) #ddd; font-size:4em; z-index:5;  color:#fff;}
    
    #foot { position:fixed; margin:0; bottom:0; right:18px; display:block; width:750px;  height:50px; background:rgb(214,100,50); color:#fff;  text-align:right;  font-size:1em;  z-index:4;}
    
    * html #head, * html #foot,* html #left {position:absolute;}
    
    #pad1 {display:block; width:18px; height:100px; float:left;}
    #pad3 {display:block; width:18px; height:50px; float:left;}
    .pad2 {display:block; height:100px;}
    
    
    </style>
    and the html

    Code:
    <div id="container">
        <div id="head">
          <div id="pad1"></div>
          For ART'S sake...
        </div>
        
        <div id="foot">
          <div id="pad3"></div>
        <br />
        &copy; 2004 Stuart A Nicholls ~ All rights reserved&nbsp;</div>
    
        <div id="content">
        <div class="pad2"></div>
        test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>
        test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>
        test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>
        test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>test<Br><br>
        <div class="pad2"></div>
        </div>
    </div>
    Can anyone help?

    Thanks

    Phil

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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.
    Attached Images Attached Images

  6. #6
    Join Date
    Oct 2003
    Posts
    205
    Centauri,

    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.

    Thanks

    Phil
    Attached Images Attached Images

  7. #7
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Not sure what you have done there, but the page coded as I posted above works fine in IE7 (and IE6) for me....

  8. #8
    Join Date
    Oct 2003
    Posts
    205
    Erm me neither... I just copied and pasted it and it didn't work... but just re-pasted it and it works fine now. Strange!

    Thanks for your help mate

    Phil

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles