ansaurus

Question

need help CSS centering with absolute positioning

Answer 1

A:

Don't you want relative positioning if 0,0 is going to be relative to a div?

Tony 2009-06-23 18:57:12

no, I want the things IN that div to have exact locations, but if you start setting things to "absolute" they line up against the top left of the browser rather than the parent div.

Dr.Dredel 2009-06-23 18:58:17

Answer 2

+3 A:

I nice way to center stuff is to use the "margin:auto" css tag. This works in FF and Safari. Just give a div some width and a margin auto, and if the parent is 100% width, then this div will center align itself.

For this to work in IE, you have to use the text-align:center attribute on the parent and then text-align left on the actual centred div.

AFAIK, there is no way to change the absolute co-ordinates from 0,0 to some other arbit point. Relative is the way to go.

Shreyas 2009-06-23 18:58:44

you use the left, right, top and bottom CSS properties to position an element that has relative or absolute positioning eg. top: 10px; moves the element 10 pixels away from the top.

sanchothefat 2009-06-23 19:15:09

Answer 3

+7 A:

body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }

Just example code, but any .child element would be at 0,0 of the wrapper

Any absolutely positioned element will absolutely position to it's nearest position-relative parent. If an element doesn't have a parent with position relative, it just uses the document. Below is an example without classes (some color and width styles added for clarity).

<html>
    <body style="text-align: center;">
        <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
            <div style="position: absolute; left: 0; top: 0;">
                This will absolutely position relative to the container div.
            </div>
        </div>
        <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
            This will absolutely position relative to the document
        </div>
    </body>
</html>

Mike Robinson 2009-06-23 18:59:35

that totally works, and is exactly what I was looking for. I'm on a mac, atm, and testing in FF and Safari. Does this work the same in IE (I don't care about IE6, just the more recent versions).

Dr.Dredel 2009-06-23 19:19:21

just tested in IE... works like a charm. So, the key to the whole enterprise is having classes that are defined as belonging to the style id ie: #id.classname Very interesting.

Dr.Dredel 2009-06-23 19:28:55

Actually no - see update for further explanation

Mike Robinson 2009-06-23 19:39:25

And yes, this works in IE6

Mike Robinson 2009-06-23 19:58:22

strange... I thought I had tried this approach and it did not work. Is there a way for the parent div to take on the dynamic height of its child divs? I notice that when I set the parent bg color, unless I explicitly give it a height, that color doesn't show up (even though the child divs are pushing the bottom of their parent down).

Dr.Dredel 2009-06-23 20:13:36

When you absolutely position an element you remove it from the flow of the document. Unfortunately this means it can't influence the height of it's parent element. You can try looking into floating the element (float: left) and clearing after it, but this will provide less options than absolute positioning.

Mike Robinson 2009-06-23 20:52:12

Answer 4

A:

maybe I didn't understand the task but I think you can use

margin: 0 auto;

for centering your divs

Roman 2009-06-23 18:59:35

Answer 5

+1 A:

Use relative positioning on the parent and give that same element the property:

margin: 0 auto;

The parent is now positioned and you should be able to set elements absolutely within it.

Example:

div#page{
  position:relative;
  width:400px;
  margin:0 auto;
}

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}

moorej 2009-06-23 19:11:31

Answer 6

+2 A:

If you're sticking with position: absolute; then set the div that you want things positioned against to have position: relative; to make it into the positioning context for any child elements.

To center an absolutely positioned div you need to know it's width, then use the following CSS:

#wrapper {
    width: 800px;
    margin: 0 auto;
    position: relative; /* creates a positioning context for child elements */
}

#child {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px;
}

And the HTML:

<div id="wrapper">
    <div id="child">
        ....
    </div>
</div>

You can tweak the width and left margin as you need it (the negative left margin should be half of the width of the div you are centering eg. #child.

As other people have mentioned using margin: 0 auto; on an element with a width set on it will center it.

sanchothefat 2009-06-23 19:12:53

Answer 7

A:

The text-align: center; property does what <center> used to and it is vastly superior to it.

Only thing is, it's a bit more complex to use. Once you get the hang of it, you'll wonder why you were having so much trouble before!

You must use it in coordination with the properties of other elements on the page. That is the issue developers/designers have with CSS and newer HTML technologies. It gives us a powerful way to present our page elements but makes it much more complex and strict.

Mike Robinson's answer certainly solves the problem you're having here and it's a great example. But...

I don't think any one answer will show you how to use text-align properly for all cases you'll come across but try looking into how positioning in CSS works more in-depth.

T Pops 2009-06-23 19:53:45

ansaurus

tags:

views:

answers:

need help CSS centering with absolute positioning

related questions