possible to make div width match content?

Discussion in 'HTML' started by Stan R., Apr 1, 2006.

  1. Stan R.

    Stan R. Guest

    Hello.

    I'm trying to make a <div>, but from what I've observed, be default, it
    trys to consume the most width possible.

    What 'm have trouble doing is make it take the /minmal/ space possible,
    like a table without any specified width.

    What I'm really getting at is I'm trying to have a simple <div> with
    left aligned text but be centered on the screen.

    I've tried many variants of the following:

    <center>
    <div style="text-align: left">
    Text that should be Left aligned, but centered on the screen.
    </div>
    </center>


    So it looks like this

    | Text that should be Left aligned, but centered on |
    | the screen. |

    ^----- screne border -------------------------------------------------^

    Thanks for any help. This is really driving me up the wall, especialyl
    since I've bene workign with html since 1997! arrgh! :)

    --
    Stan R.
     
    Stan R., Apr 1, 2006
    #1
    1. Advertising

  2. Stan R.

    dorayme Guest

    In article <>,
    "Stan R." <> wrote:

    > Hello.
    >
    > I'm trying to make a <div>, but from what I've observed, be default, it
    > trys to consume the most width possible.
    >
    > What 'm have trouble doing is make it take the /minmal/ space possible,
    > like a table without any specified width.
    >
    > What I'm really getting at is I'm trying to have a simple <div> with
    > left aligned text but be centered on the screen.
    >
    > I've tried many variants of the following:
    >
    > <center>
    > <div style="text-align: left">
    > Text that should be Left aligned, but centered on the screen.
    > </div>
    > </center>
    >
    >
    > So it looks like this
    >
    > | Text that should be Left aligned, but centered on |
    > | the screen. |
    >
    > ^----- screne border -------------------------------------------------^
    >
    > Thanks for any help. This is really driving me up the wall, especialyl
    > since I've bene workign with html since 1997! arrgh! :)


    Try this:

    In your css:

    ..centre

    margin-left: auto;
    margin-right: auto
    width: 50%;

    /* or whatever % of the container, body or otherwise, that you
    want */

    And in the html

    <div class="centre">
    <p>Your text goes on and on here....</p>
    </div>

    --
    dorayme
     
    dorayme, Apr 1, 2006
    #2
    1. Advertising

  3. Stan R.

    Spartanicus Guest

    "Stan R." <> wrote:

    >I'm trying to make a <div>, but from what I've observed, be default, it
    >trys to consume the most width possible.


    That would be "width:0", not much point I would think.

    >What 'm have trouble doing is make it take the /minmal/ space possible,
    >like a table without any specified width.


    That would be the table-layout:auto width mechanism:
    http://www.w3.org/TR/CSS21/tables.html#width-layout

    >What I'm really getting at is I'm trying to have a simple <div> with
    >left aligned text but be centered on the screen.
    >
    >I've tried many variants of the following:
    >
    ><center>
    ><div style="text-align: left">
    >Text that should be Left aligned, but centered on the screen.
    ></div>
    ></center>
    >
    >
    >So it looks like this
    >
    >| Text that should be Left aligned, but centered on |
    >| the screen. |
    >
    >^----- screne border -------------------------------------------------^


    A table without specified width would extend the width of the table to
    100% of it's containing block, and then wrap the text within it, not
    what you've drawn above.

    To achieve what you've drawn you'd need

    <p style="width:25em;margin-left:auto;margin-right:auto">Text that
    should be Left aligned, but centered on the screen.</p>

    --
    Spartanicus
     
    Spartanicus, Apr 1, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    822
    Bruce Barker
    Oct 10, 2005
  2. Replies:
    0
    Views:
    520
  3. =?Utf-8?B?cm9kY2hhcg==?=

    how to: div width = browser.width?

    =?Utf-8?B?cm9kY2hhcg==?=, Oct 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    550
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  4. Steve Richter
    Replies:
    2
    Views:
    7,983
    Steve Richter
    Jun 15, 2007
  5. ekazda

    DIV Width Match Content

    ekazda, Feb 13, 2008, in forum: HTML
    Replies:
    0
    Views:
    995
    ekazda
    Feb 13, 2008
Loading...

Share This Page