Position absolute but center div
Is there a way to position a div using absolute vertically but have it centered horizontally???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<center>
<div style="position: absolute; top: 100px;">HELLO</div>
</center>
</body>
</html>
...have I got that the correct way around?
Or using pure CSS specify left or right with a percentage (eg. left:20%;), but then you'll need to divide up the page into vertical columns.
bg
<html>
<head>
</head>
<body>
<center>
<div style="position: absolute; top: 100px;">HELLO</div>
</center>
</body>
</html>
...have I got that the correct way around?
Or using pure CSS specify left or right with a percentage (eg. left:20%;), but then you'll need to divide up the page into vertical columns.
bg
Don't use the center tag, it's deprecated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#frame
{
width:300px;
height:300px;
margin:100px auto 0;
position:relative;
}
</style>
</head>
<body>
<div id="frame">
<p>Horizontally centered, 100 pixels from the top.</p>
<p>All descendant boxes will now position to the top left of this box, not the window, because we've used position:relative.</p>
</div>
</body>
</html>
Thanks,
Sean
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#frame
{
width:300px;
height:300px;
margin:100px auto 0;
position:relative;
}
</style>
</head>
<body>
<div id="frame">
<p>Horizontally centered, 100 pixels from the top.</p>
<p>All descendant boxes will now position to the top left of this box, not the window, because we've used position:relative.</p>
</div>
</body>
</html>
Thanks,
Sean
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>> You need to use 2 nested divs
Why?
Why?
> Why?
AFAIK, it's either that, or using left:50% and a negative left-margin which should be avoided.
Do you know any other way sean?
Note that the question is about position:absolute, not relative.
AFAIK, it's either that, or using left:50% and a negative left-margin which should be avoided.
Do you know any other way sean?
Note that the question is about position:absolute, not relative.
absolute and relative are very similar depending on what they're for - it really depends on the surrounding layout. If this box is the main container on the page, then position relative is just fine.
>>left:50% and a negative left-margin which should be avoided.
Sorry, why again?
>>left:50% and a negative left-margin which should be avoided.
Sorry, why again?
negative margins should be avoided for non-absolutely positionned elements because IE does not support them well in some cases... to be on the safe side, it's better not to use them at all.
in case of absolutely positionned elements, your element might end up outside the visible area (without scrollbars).
in case of absolutely positionned elements, your element might end up outside the visible area (without scrollbars).
>> negative margins should be avoided for non-absolutely positionned elements
We are talking about absolutely positioned elements, as in:
#frame
{
width:300px;
position:absolute;
top:100px;
left:50%;
margin-left:-150px;
}
so that's not really an issue. As far as IE support goes, do you have any specific examples or documentation of that?
>>in case of absolutely positionned elements, your element might end up outside the visible area (without scrollbars).
Can you show me an example of that also (under normal circumstances, of course.)
Sean
We are talking about absolutely positioned elements, as in:
#frame
{
width:300px;
position:absolute;
top:100px;
left:50%;
margin-left:-150px;
}
so that's not really an issue. As far as IE support goes, do you have any specific examples or documentation of that?
>>in case of absolutely positionned elements, your element might end up outside the visible area (without scrollbars).
Can you show me an example of that also (under normal circumstances, of course.)
Sean
...seanpowell & GrandSchtroumpf, thanks for demonstrating the madness of current web development...:o)
My solution works, but with a deprecated HTML tag that was easily understood and implemented. The tag was deprecated without a clear replacement and now we are left squabbling over how to implement a very simple requirement using overly complex methods...
I'm going back to the world of databases, things are far more clearcut there...
bg
My solution works, but with a deprecated HTML tag that was easily understood and implemented. The tag was deprecated without a clear replacement and now we are left squabbling over how to implement a very simple requirement using overly complex methods...
I'm going back to the world of databases, things are far more clearcut there...
bg
> Can you show me an example of that also (under normal circumstances, of course.)
Sure, let's take your rule:
#frame
{
width:300px;
position:absolute;
top:100px;
left:50%;
margin-left:-150px;
}
if your window's width is 200px, the #frame will remain centered, so the 50px on the left will be hidden.
that might not be a huge problem for a #frame that is not very wide (there's a good chance your window will be wider than 300px), but i think it's better to avoid that.
using 2 nested divs solves the problem, so why not using that? it's not a big overhead.
Sure, let's take your rule:
#frame
{
width:300px;
position:absolute;
top:100px;
left:50%;
margin-left:-150px;
}
if your window's width is 200px, the #frame will remain centered, so the 50px on the left will be hidden.
that might not be a huge problem for a #frame that is not very wide (there's a good chance your window will be wider than 300px), but i think it's better to avoid that.
using 2 nested divs solves the problem, so why not using that? it's not a big overhead.
> ...seanpowell & GrandSchtroumpf, thanks for demonstrating the madness of current web development...:o)
That's why it's fun. Sean left this TA for a long long time, it's great to have him back so we can have interesting discussions.
> I'm going back to the world of databases, things are far more clearcut there...
Discussing good database desing is pretty much the same thing.
<:°)
That's why it's fun. Sean left this TA for a long long time, it's great to have him back so we can have interesting discussions.
> I'm going back to the world of databases, things are far more clearcut there...
Discussing good database desing is pretty much the same thing.
<:°)
No question - if a window is 200 pixels width there may well be a pile of things that are not visible...
A 200 pixel wide browser window is not exactly what I would call normal circumstances though :-)
I guess my point is this - if I have a "normal" web page there is nothing wrong with using negative margins. They are fully and completely supported by the w3c and I am not aware of any issue with IE where it incorrectly applies the attribute.
That said - one always needs to make sure that the complexity of the code required for simple presentation never exceeds the need for a user to want to read the content. In the case of centering a web page, I don't ever recall leaving a site because it was left aligned :-)
>>Sean left this TA for a long long time,
Was just way too busy, I'm taking a break for a bit... philanthropic endeavors help clear the mind of clutter, don't you know!
A 200 pixel wide browser window is not exactly what I would call normal circumstances though :-)
I guess my point is this - if I have a "normal" web page there is nothing wrong with using negative margins. They are fully and completely supported by the w3c and I am not aware of any issue with IE where it incorrectly applies the attribute.
That said - one always needs to make sure that the complexity of the code required for simple presentation never exceeds the need for a user to want to read the content. In the case of centering a web page, I don't ever recall leaving a site because it was left aligned :-)
>>Sean left this TA for a long long time,
Was just way too busy, I'm taking a break for a bit... philanthropic endeavors help clear the mind of clutter, don't you know!
> A 200 pixel wide browser window is not exactly what I would call normal circumstances though :-)
I just showed you what the limits are. I said it should be fine with divs that are not too wide. If the div is 800px, that's another issue. Also, if the element contains text, it's much better to use widths in "em", and if you do that, you'll never know how wide the div will be.
Conclusion: using 2 nested divs is simple and will work in 100% of the cases. Also, it's a lot more flexible and easier to maintain, because you don't need to make sure the negative left-margin is equal to half the width (good thing if you want to dynamically set the width in inline style). i only see advantages here.
I just showed you what the limits are. I said it should be fine with divs that are not too wide. If the div is 800px, that's another issue. Also, if the element contains text, it's much better to use widths in "em", and if you do that, you'll never know how wide the div will be.
Conclusion: using 2 nested divs is simple and will work in 100% of the cases. Also, it's a lot more flexible and easier to maintain, because you don't need to make sure the negative left-margin is equal to half the width (good thing if you want to dynamically set the width in inline style). i only see advantages here.
<:°)
ASKER