centering pages using position absolute

Hi,

I'm implementing a website at the moment and I have incoporated css as documented in the following article...

http://scott.sauyet.com/CSS/Demo/FooterDemo2.html

This bascially creates a footer that sits on the bottom of the page if there isn't enough content to fill it up, but also allows for expansion in larger pages. It uses some IE hacks and requires a 'containing' div to be positioned absolutely. However, I'm finding it difficult to center my pages in the usual way in both Firefox and IE6. By the usual way I mean something like...

Code: Select all

#contents { width:780px; margin:4px auto; margin-left:expression( (document.body.clientWidth - 780) / 2 + 'px');}

Because contents is position absolute, neither the margin-left expression nor the auto work. I have tried the obvious thing and applied these to the left style attribute but this doesn't work! My best solution, for which I'm looking for an improvement, is...

Code: Select all

#contents {position: absolute;top: 0; height: 100%;width: 780px;
left: 12%;right:12%;}

Best
Damian

Are you trying to do vertical or horizontal centering or both?

Vert + Hor centering is actually quite simple.

http://www.sabordesign.com/css_layou...al%20Centered/

__________________

I have already tried something similar to this and it doesn't work: as the client width is reduced past 780px the side main content container of the site (the centred div element) moves beyond the edge of the window so I slowly loose my side bar.

I have found a forum post in another forum that has solved my problem for FireFox but it doesn't work for IE. Have a look at this as it sums up my problem probably better than I could...

http://forums.sixapart.com/index.php...r&f=14&t=63217

This solution puts everything inside another container, called here div#overall, which then uses position:relative and the margin:auto rules. This works perfectly for FF but I'm thinking there could be some CSS expression that would work with this solution to fix IE.

Here is a copy of some of my relevant code... [Note the CSS expression in here is schematic and results in the same problem as when using the solution you quoted in the last post. I was thinking if there is a way of altering this expression so that any negative values px are converted to 0px but I don't know if there is a function to do this or if it can be expressed inline].

Code: Select all

html, body { min-height: 100%; width: 100%; height: 100%;}

html>body, html>body #contents {height: auto;}

body { margin: 0; font-family: Arial, Helvetica, sans-serif;}

div#overall {
position:relative;
width:780px;
margin: auto;
margin-left:expression((document.body.clientWidth - 780) / 2 + 'px');
}

#contents {position: absolute;
top: 0; 
height: 100%;
width: 780px;
min-height: 100%;

}

#footer {position: absolute; bottom: 0; background-color: #ccffcc; width: 70%; text-align: center; padding: 0 15%;}

/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack 
 * Stupid hack lets IE see 100%, others see 70%. 
 */
#footer {  \width: 100%;  w\idth: 70%;}

#main {margin-bottom: 5em;     height: auto; padding: .5em; text-align:center;}

Thanks,
Damian

Dunno man, the link I gave you works in everything. What exactly are you trying to accomplish? There are methods for sticky footers and such in this forum as well.

__________________

Have a look at the example you quoted above and reduce the browser width to less than 600px (the width of the box). As you reduce the browser, the box will start disappearing into the left. In short, instead of this happening, I want the box to stay at left margin 0px of the window.

The position absolute and sticky footers might be the problem, but I have the solution for FF but not for IE. If there is a sticky footer solution that doesn't require a position absolute in a #container div that would be good.

Less than 600px in width?! Unless you're designing for PDA's, I wouldn't bother with that.

Well my box is 780px and we have lots of myopic nutters here who love to use low res monitors as if they were PDA's.

Sorry this quite particular!