1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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