SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering Container DIV on Page

    Ok, I have tried to do this several different ways. I have a "container" div that holds the rest of the divs. I want to have it centered in the page. right now it has a left margin of about 10 px. I don't want that. Here is my css:
    Code:
     #container {
    width : 785px;
    margin-right : auto;
    margin-left : auto;
    margin-top : 0px;
    padding : 0px;
    background-color : #FFFFFF;
    text-align : center;
    position : absolute;
    top : 0px;
    height : 685px;
    left : auto; /*I had commented this out completely and it didn't help*/
    vertical-align : middle;
    z-index : auto;
    visibility : visible;
    }
    What I want it to do is fill the whole page on 800x600 and be centered for all other resolutions above that.

    Any ideas?
    RUN2Web

    Has Anyone seen my Furry Little Mind?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You need to have a proper HTML 4.01 or XHTML DOCTYPE in order for margin:auto to work.

  3. #3
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    You need to have a proper HTML 4.01 or XHTML DOCTYPE in order for margin:auto to work.
    I have this DOCTYPE:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    Isn't that correct?
    Last edited by Run2Web; Apr 2, 2003 at 12:12.
    RUN2Web

    Has Anyone seen my Furry Little Mind?

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just a thought...are you using Internet Explorer ? if so, the margin:auto won't work in it's "interesting" implementation of CSS...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    just a thought...are you using Internet Explorer ? if so, the margin:auto won't work in it's "interesting" implementation of CSS...
    Hmm, yes I am using IE6. Any suggestions to center it? Removing margin has no effect and setting margin-right and margin-left to a specific amount, even a % negates what I am trying to do.
    RUN2Web

    Has Anyone seen my Furry Little Mind?

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Get rid of the <?xml?> declaration and your page should work as expected.
    http://www.tantek.com/CSS/Examples/boxmodelhack.html

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try removing the position absolute because you are not absolutely postioning it. Also remove the left : 10px. It will then centre in compliant browsers.

    For ie5 you will need to wrap the whole thing in another div and use text-align: center which is a bug in iE5 (and IE6 in quirks mode).

    e.g.
    <div style="text-align:center">
    <div id="container">
    content etc....
    </div>
    </div>

    Of course this will cause other browsers to centre the text so add text-align:right (if required) to your container style.

    Hopefully it will then centre.

    Paul

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's right the xml prologue causes IE6 to go into quirks mode (which is a major bug) so you can simply omit it as it is optional, just ensure you have the character encoding in the meta tag.

    However IE5 has a bug that doesn't recognise margin-right:auto & margin left:auto which is the correct way to centre a div, so you will still have to use the technique I mentioned in the above post to make your container centre in IE5. (That is to wrap it in another div with text-align:center as explained above.) (That way it also doesn't matter if you leave the xml prologue in, although it's best to leave it out as IE6 will run in quirks mode with it in.)

    Hope this helps

    Paul

  9. #9
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Try removing the position absolute because you are not absolutely postioning it. Also remove the left : 10px. It will then centre in compliant browsers.

    For ie5 you will need to wrap the whole thing in another div and use text-align: center which is a bug in iE5 (and IE6 in quirks mode).

    e.g.
    <div style="text-align:center">
    <div id="container">
    content etc....
    </div>
    </div>
    Ok, Major frustration time here. I have removed the XML definition at the top of the page, I have created a container holder and placed everything in that, text-align : center, No position tag, no left, no right, etc, etc, etc. What then happens is the page ends up at the right side of the page scrolling OFF the page. I guess I will just leave it aligned on the left side of the page like it was originally even though it looks goofy, it isn't as goofy as the other options. I know there has to be a way around this though
    RUN2Web

    Has Anyone seen my Furry Little Mind?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Don't give up yet!! You must have something else affecting it in your styles etc.

    Have you got a link to the page as it might be easier to see what's going on. I have got your #container code (with my amendments) working fine on IE6 Mozilla and Opera.

    Paul

  11. #11
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link for the site is http://www.summitdesignservices.com/...003/index.html and the link for the css is http://www.summitdesignservices.com/...03/sds2003.css

    I took out all of the stuff I had put in and put it back to the way it was before. The id for the container holder is #holdcontainer but it isn't used in the page that is online because like I said, I put it back the way it was.

    Thanks
    RUN2Web

    Has Anyone seen my Furry Little Mind?

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Just to upset the "Apple Cart" I remember reading the <?xml version="1.0" encoding="....."?> prologue can become mandatory for XHTML if you used a character set other than UTF-8 or UTF-16.

    I am getting slightly annoyed; since I cannot remember which W3C technical recommendation it stated this case although basically the XML prologue is mandatory as it sets the defaults for the encoding of the file. If the encoding declaration is omitted, the file is assumed to be UTF-8.

    Although this is of little concern to the average user and browser...

  13. #13
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gee thanks, as if there weren't enough apples on the ground here already! If you find it let me know.
    RUN2Web

    Has Anyone seen my Furry Little Mind?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Run2Web
    Gee thanks, as if there weren't enough apples on the ground here already! [img]images/smilies/FRlol.gif[/img] If you find it let me know.
    Hi,

    I've managed to centre your page using the format I explained above. I just changed your #container style to this.

    Code:
    #container {
     width : 782px;
     margin-top : 0px;
     padding : 0px;
     background-color : #FFFFFF;
     text-align : center;
     height : 685px;
     vertical-align : middle;
     z-index : auto;
     visibility : visible;
     margin-right: auto;
     margin-left: auto;
     position: relative;
    }
    Note: Because you have other elements that are absolutely positioned on the page you need to make this container position relative so that the absolute position of other elements refers to their position within the container. Otherwise an absolute psitioned element is positioned to it's nearest ancestor containing element that has a property for position. If there is none then the absolute position is relative to the html element.

    Also for this to centre in IE5 (and IE6 quirks mode) yoe will need to surround the whole lot with another div and set text-align:center as mentioned above.

    Hope this helps

    Paul

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just one last thing I notice that you used vertical-align: middle. This determines the alignment of text within a line or within a table cell. It doesn't vertically align a div or text within a div. I'm not sure what you were using it for so if its not as above then you won't need it.

    Paul

  16. #16
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're a genious Paul!!!! I apparently didn't try the right combinations of things. Thank you for all of the time you put into it.
    RUN2Web

    Has Anyone seen my Furry Little Mind?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad to help.

    Paul

  18. #18
    SitePoint Zealot Run2Web's Avatar
    Join Date
    Apr 2002
    Location
    Indiana
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Just one last thing I notice that you used vertical-align: middle. This determines the alignment of text within a line or within a table cell. It doesn't vertically align a div or text within a div. I'm not sure what you were using it for so if its not as above then you won't need it.

    Paul
    Hmmm I honestly don't remember why I put it in there. I ahve been working on this sporadically for a couple of months. I will take it out and see what it does. Thanks again!
    RUN2Web

    Has Anyone seen my Furry Little Mind?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •