Another div centering problem

Discussion in 'CSS' started by tolerant, Apr 18, 2007.

0
  1. #1
    I've stared at this for an hour, and checked pages of centering posts on this forum, but can't get anywhere.

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head><title></title></head>
<body>

<div style='width: 600px; outline: thin solid blue;'>
Some content before.

<div style='margin-left: auto; margin-right: auto; outline: thin solid red;'>
centered content
</div>

Some content after.
</div>

</body>
</html>
    HTML:
    Quite simply, I have a div (that will be the content div of a standard 2-column webpage, so later it is floated), and I want the inside div to have auto width, and be centered inside the parent div. In the provided example, the inside div is always going to width: 100%, and as such, the margins don't matter.

    Thanks
     
    tolerant, Apr 18, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    You're going to need to be clearer for my little pea brain. If a block element is {width: auto;}, it is as wide as will fit its parent. It is automagically centered, simply because it has to be.

    cheers,

    gary
     
    kk5st, Apr 18, 2007 IP
  3. tolerant

    tolerant Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I guess what I want is a block's width to adjust to its content. I want to put a form in the block, which will end up having a width around 300px, and I want that block to be centered within the other. The width of the inner will have some variation, and I don't simply want to center all the text inside.

    I can work up an example if that's still unclear.
     
    tolerant, Apr 18, 2007 IP
  4. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    to be able to use margin: auto; you have to set a width to the div box. without it, its not possible to center a div
     
    deques, Apr 18, 2007 IP
  5. mich_alex

    mich_alex Well-Known Member

    Messages:
    511
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #5
    i don't think you can centered the content div if your parent div already set to
    width:600px.
    since you need a flexible content div..it will automatically calculate the width of parent div so just lose the width:600px and see how that's go
    and set the body tag to 0000margin and text align:center

    try it out..ok :)
     
    mich_alex, Apr 18, 2007 IP
  6. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #6
    Try this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head><title></title></head>
    <body>

    <div style='text-align:center;width: 600px; outline: thin solid blue;'>
    Some content before.

    <div style='margin-left: auto; margin-right: auto; outline: thin solid red;'>
    centered content
    </div>

    Some content after.
    </div>

    </body>
    </html>
     
    webcosmo, Apr 20, 2007 IP