Position absolute but center div

Is there a way to position a div using absolute vertically but have it centered horizontally???
894359Asked:
Who is Participating?
 
GrandSchtroumpfCommented:
You need to use 2 nested divs:

<!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">

div.MyLayer
{
     position:absolute;
     top: 5em;
     left: 0;
     border: 1px solid blue;
     width: 100%;
}
div.MyContent
{
     width:20em;
     background: lime;
     margin: 0 auto;
     border: 1px solid red;
}

</style>
</head>
<body>

<div class="MyLayer">
<div class="MyContent">
This content is centered.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nunc urna, tempor at, tristique a, tincidunt vel, erat.
</div>
</div>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nunc urna, tempor at, tristique a, tincidunt vel, erat. Fusce augue ante, vehicula quis, suscipit sed, ornare quis, nibh. Donec ut libero eu elit mollis fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac sem vel nunc fringilla consectetuer. Suspendisse eu ante quis diam faucibus lacinia. Pellentesque sapien. Nullam rutrum tellus eget mauris. Donec fermentum, augue eget condimentum aliquam, lectus mauris placerat lectus, id sodales eros nibh eget dolor. Morbi mollis, ligula fringilla lobortis pellentesque, magna libero vehicula elit, ut vulputate mi nulla non lectus. Phasellus eleifend commodo tellus. Praesent lorem turpis, pulvinar non, molestie id, varius nec, metus. Suspendisse lectus.
</div>

</body>
</html>
0
 
894359Author Commented:
centering has to be relative to window size.
0
 
bochgochCommented:
<!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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
seanpowellCommented:
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
0
 
seanpowellCommented:
>> You need to use 2 nested divs

Why?
0
 
GrandSchtroumpfCommented:
> 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.
0
 
seanpowellCommented:
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?
0
 
GrandSchtroumpfCommented:
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).
0
 
seanpowellCommented:
>> 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
0
 
bochgochCommented:
...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
0
 
GrandSchtroumpfCommented:
> 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.
0
 
GrandSchtroumpfCommented:
>  ...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.

<:°)
0
 
seanpowellCommented:
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!
0
 
GrandSchtroumpfCommented:
> 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.
0
 
GrandSchtroumpfCommented:
<:°)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.