?
Solved

Position absolute but center div

Posted on 2005-05-12
15
Medium Priority
?
3,976 Views
Last Modified: 2008-03-06
Is there a way to position a div using absolute vertically but have it centered horizontally???
0
Comment
Question by:894359
  • 7
  • 5
  • 2
  • +1
15 Comments
 

Author Comment

by:894359
ID: 13984118
centering has to be relative to window size.
0
 
LVL 13

Expert Comment

by:bochgoch
ID: 13984509
<!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
 
LVL 31

Expert Comment

by:seanpowell
ID: 13985378
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 2000 total points
ID: 13985857
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 13985960
>> You need to use 2 nested divs

Why?
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13986099
> 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
 
LVL 31

Expert Comment

by:seanpowell
ID: 13986142
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13987150
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 13987295
>> 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
 
LVL 13

Expert Comment

by:bochgoch
ID: 13987398
...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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13987800
> 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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13987855
>  ...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
 
LVL 31

Expert Comment

by:seanpowell
ID: 13987916
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13988466
> 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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13989905
<:°)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month17 days, 6 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question