SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    milwaukee
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How To Center A Div Box?

    I should know how to do this, but for some reason it just isn't working! I've looked around here, too, and thought I was doing it right. I guess not.

    What I want to do is create a wrapper div ("wrapper") that I can then align left, right, center--whatever I feel like. The wrapper div is 400px high by 300px wide, it doesn't take up the entire width.

    Within that wrapper div I want another div ("textdiv") with text that I can center, or align as I please, within the wrapper div, wherever wrapper div happens to be.

    The problem I am having is that when I try "text-align:center;" in "textdiv", the text aligns center relative to the body and not relative to the "wrapper".

    For example, when I had wrapper aligned right (which I can no longer figure out how to do), the text was centered not within the div, but in the center of the screen.

    I thought that this was supposed to be a parent-child thing where any alignment in "textdiv" would be relative to the parent "wrapper" div.

    Apparently I don't understand CSS as well as I thought I did.

    Any suggestions how I can use a wrapper that I can move around as I please without having to worry about the text inside? I want a wrapper to completely contain all divs within that I can just align as I please. I thought this was possible.

    Thanks.

  2. #2
    SitePoint Evangelist comfixit's Avatar
    Join Date
    Dec 2004
    Location
    Pasadena
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What type of positioning attribute are you using on the two DIVS?

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    milwaukee
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by comfixit
    What type of positioning attribute are you using on the two DIVS?
    text-align;

    The positioning is default, I'm not using postion:absolute or anything like that. I believe the default positioning is static, isn't it?

    I hope that's what you are referring to. If not, let me know.

  4. #4
    SitePoint Evangelist comfixit's Avatar
    Join Date
    Dec 2004
    Location
    Pasadena
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not a super CSS guru but I did have some similar problems with positioning.

    Give the parent tage a relative position attribute and see if that does not fix your positioning for your child tag.

    If that does not work, play around with the different position attributes for both tags, there is some combination of those attributes that will fix your problem.

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    milwaukee
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Naw, nothing I've seen yet has helped. Here is the code for the Div I cannot center (or align right for that matter). You guys tell me how to align this simple example:

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <style type="text/css">
    <!--
    * {
    margin: 0;
    padding: 0;
    }
    .wrapper {
    text-align: center;
    }
    -->
    </style>
    </head>
    <body>
    <div class="wrapper" style="border-width: 1px; border-style: solid; width: 400px; height: 300px">
    </div>
    </body>
    </html>
    In my opinion there are still serious deficiencies in CSS. A simple <center> tag works. But unfortunately some people have decided that it should be depreciated. Silly.

  7. #7
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's "deprecated", not depreciated.

    Text-align is for... text, surprisingly. To centre-align a DIV with a known width, use "margin: 0 auto;".

    As comfixit alluded to, to position a child DIV in relation to its parent using the position attribute, the parent DIV must also have position set - use "position: relative".

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The doctype should always go before <html>.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <style type="text/css">
    <!--
    * {
      margin: 0;
      padding: 0;
    }
    body {
      text-align: center; /* for IE/Win */
    }
    .wrapper {
      text-align: left;
      margin: 0 auto; /* for good browsers */
    }
    -->
    </style>
    </head>
    <body>
    <div class="wrapper" style="border-width: 1px; border-style: solid; width: 400px; height: 300px">
    </div>
    </body>
    </html>
    All I did was move the doctype and apply one of the methods shown in the page I linked to in my previous reply.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    milwaukee
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    It's "deprecated", not depreciated.

    Text-align is for... text, surprisingly. To centre-align a DIV with a known width, use "margin: 0 auto;".

    As comfixit alluded to, to position a child DIV in relation to its parent using the position attribute, the parent DIV must also have position set - use "position: relative".
    OK. I got it.

    http://dictionary.reference.com/search?r=2&q=deprecated

    1. To express disapproval of; deplore.
    2. To belittle; depreciate.

    "Depreciated" is often used instead of "deprecated". I see it all over the place.


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
  •