Center a DIV which is in a absolutely positioned DIV

Conrad11 · 15 Jun 2008 at 20:37

Hi there,

Basically I have this:

Code:

<div id="div1">
   <div id="div2">
   </div>
</div>

Code:

#div1{height:100%;width:100%;position:absolute;bottom:0;right:0}
#div2{background:#fff;width:600px;height:600px}

Basically, I want to horizontally center DIV2, and vertically if possible.

....bit out of the loop with xhtml/css atm....is it possible?

Thanks.

EDIT:

Before you say it:

Code:

margin{0 auto}

...doesn't work in IE.

malfunkshun · 15 Jun 2008 at 20:42

putting a rigid div inside a fluid div can cause issues.

Conrad11 · 15 Jun 2008 at 20:48

Not working here.

Never seen the "align" attribute either, you sure it exists?

malfunkshun · 15 Jun 2008 at 20:53

Conrad11 said:
Not working here.

Never seen the "align" attribute either, you sure it exists?

sorry changed my original post. It doesnt officially exist until CSS3.0

anyway, see my edit and whats the rest of the css?

Conrad11 · 15 Jun 2008 at 20:57

that's all the CSS that there is......I have isolated the issue to that....I am just mucking around atm with an idea.....so there isn't actually a "site" yet....

Managed to come up with a temp solution, but I am unsure as to where it works in IE6 which is important to me.......

Code:

#div1{height:100%;width:100%;position:absolute;bottom:0;right:0;text-align:center}
#div2{background:#fff;width:600px;height:600px;marign:25px auto}

....doesn't do vertical aligning, but will do if it works in ie6.

The margin:0 auto does firefox, and the text-align:center does IE.

malfunkshun · 15 Jun 2008 at 21:00

#div1{height:100%;width:100%;position:relative;bottom:0;right:0}

.div2 {width:600px; position:absolute; left:50%; margin-left:-250px;
}

though

.div2 {margin: Zpx auto; }
Should work

Conrad11 · 15 Jun 2008 at 21:02

did you see my post before.....confirmed that it works (my code) in IE6, firefox, IE7 + Opera....

See my original post for why margin:0 auto; was good on its own (if you missed it)....

EDIT:

Your solution doesn't work on all resolution screens im afraid

EDIT AGAIN:

Thanks for the effort though

mucho appreciated.

malfunkshun · 15 Jun 2008 at 21:08

Nah it wouldnt, having a fixed div within a fluid div can cause problems at low resolutions too

Conrad11 · 15 Jun 2008 at 21:15

Forgot to say what i was working on (incase you were interested)....

....working on a purely html/css litebox implementation....obviously limited, but I just wanted something that wasn't as big as lightbox for a couple of images.

Conrad11 · 15 Jun 2008 at 22:04

Didn't work quite how I expected, but you can see it in action here:

Its slow cause its a free host, i feel that if I had a faster host, it would be faster:

linky!

user browser only has to load ~1KB of extra html/css/images rather than the 70KB+ for lightbox, so its decent if you only need to show off a few images.

EDIT:

Works now....