Hi,
Is there a simple way of centering a div that's positioned absolutely? Even after declaring equal values to the left and right properties, it doesn't seem to center in IE, without having to declare a width.
Any ideas?
div#box {
position: absolute;
left: 300px
right: 300px;
text-align: center;
border: 2px solid red;
}
Thanks!do you want to center the div itself? or the stuff in the div? If you are trying to center the div then your problem is simply that you cannot when you specify its ABSOLUTE position. your code is incorrect try something like this:
div#box {
margin: 0px auto 0px auto;
text-align: center;
border: 2px solid red;
}
feel free to change the 0px to any amount. it specifies the margins in the following order-->
margin: top left bottom right;
how are you attempting to layout your page? is absolute positioning necesssary? if so, then there really is no way to center it. besides manually figuring out what screen resolution you want to design for.It doesn't really have anything to do with layout really. I'm using a div as pop-up message on the screen. And I'd like for it to be on top of everthing else (hence for it to have z-index, thus having to be positioned absolutely) and centered.
It looks like if you give equal values to the left and right properties, without a width, it can be centered. But this doesn't work in IE. It just positions itself to the left edge.
Talk about aggravation!have you tried this: <!-- m --><a class="postlink" href="http://www.infinitypages.com/research/verticalcentereddiv.htmOriginally">http://www.infinitypages.com/research/v ... Originally</a><!-- m --> posted by ajimenez
It doesn't really have anything to do with layout really. I'm using a div as pop-up message on the screen. And I'd like for it to be on top of everthing else (hence for it to have z-index, thus having to be positioned absolutely) and centered.
It looks like if you give equal values to the left and right properties, without a width, it can be centered. But this doesn't work in IE. It just positions itself to the left edge.
Talk about aggravation!
that is cause IE does not interpret that stuff correctly. One way that might also work is putting it inside a wrapper. But, i just looked at that website he offered....looks like a good idea to me. i would try that first.That looks like it'll work. Thanks Dave!
Although I do have to ask... would those negative values have any incompatibalities with current browsers or any issues with css validation?
Originally posted by Shmohel
that is cause IE does not interpret that stuff correctly.
You're telling me!!it works in 5.0 upwards I believe, so use @import to hide it from version 4.
Is there a simple way of centering a div that's positioned absolutely? Even after declaring equal values to the left and right properties, it doesn't seem to center in IE, without having to declare a width.
Any ideas?
div#box {
position: absolute;
left: 300px
right: 300px;
text-align: center;
border: 2px solid red;
}
Thanks!do you want to center the div itself? or the stuff in the div? If you are trying to center the div then your problem is simply that you cannot when you specify its ABSOLUTE position. your code is incorrect try something like this:
div#box {
margin: 0px auto 0px auto;
text-align: center;
border: 2px solid red;
}
feel free to change the 0px to any amount. it specifies the margins in the following order-->
margin: top left bottom right;
how are you attempting to layout your page? is absolute positioning necesssary? if so, then there really is no way to center it. besides manually figuring out what screen resolution you want to design for.It doesn't really have anything to do with layout really. I'm using a div as pop-up message on the screen. And I'd like for it to be on top of everthing else (hence for it to have z-index, thus having to be positioned absolutely) and centered.
It looks like if you give equal values to the left and right properties, without a width, it can be centered. But this doesn't work in IE. It just positions itself to the left edge.
Talk about aggravation!have you tried this: <!-- m --><a class="postlink" href="http://www.infinitypages.com/research/verticalcentereddiv.htmOriginally">http://www.infinitypages.com/research/v ... Originally</a><!-- m --> posted by ajimenez
It doesn't really have anything to do with layout really. I'm using a div as pop-up message on the screen. And I'd like for it to be on top of everthing else (hence for it to have z-index, thus having to be positioned absolutely) and centered.
It looks like if you give equal values to the left and right properties, without a width, it can be centered. But this doesn't work in IE. It just positions itself to the left edge.
Talk about aggravation!
that is cause IE does not interpret that stuff correctly. One way that might also work is putting it inside a wrapper. But, i just looked at that website he offered....looks like a good idea to me. i would try that first.That looks like it'll work. Thanks Dave!
Although I do have to ask... would those negative values have any incompatibalities with current browsers or any issues with css validation?
Originally posted by Shmohel
that is cause IE does not interpret that stuff correctly.
You're telling me!!it works in 5.0 upwards I believe, so use @import to hide it from version 4.