possible to make div width match content?

[Stan R.]

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!

 

[dorayme]

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>

 

[Spartanicus]

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>