DIV as a containing box only as wide as its contained content?

But I get what you mean. To make block level elements only as wide as their content, you need to make them display: inline. But you shouldn't be using divs for single blocks of text anyway. You should be using <p>s or headings tags h1 - h6 (or maybe lists if you have a lot of items).

You might try floating the element without stating a width.

In standards mode

p.test {
    float: left;
    background-color: pink;
    }
==============
<p class="test">Hello World!</p>

An undimensioned float element should shrink wrap its content. You will probably want/need to set the following element to {clear: left;}

cheers,

gary

Tyssen and Gary,

Thanks very much for your input. I am trying to apply what you said but dont know what is the right way. I feel I was not clear enough about what I want. Here is another example:

this is a table cell with this width

this is a table cell with this width

this is a table cell with this width

this is a table cell with this width

I want the date to align with the right edge of the table content, NOT the right side of the browser.

Thanks!
-David

Why are you using a table?

If it's to display tabular data then why not simply set the date as a table heading or column heading, or as a new row with colspan?

I feel no example can completely express my requirement:-)

Let's take out the meaning of date and treat it simply as a piece of information. It is NOT part of table and it is not sucked out of a database as table data is. The html for the table can be generated by another tool. The date is simply a piece of add-on information.

How can I use pure CSS to meet the requirement of aligning the date to the right edge of the table?

Best,
David

:? As Gary has said by floating it, only to the right not the left

Hugo, thanks for your input. I tested float for each element and it seems not working. Is it possible for you to show me where you would add float for the above table example?

Best,
David

.date { float:right; }

Hugo,

Try this code snippet with the float you suggested.

this is a table cell with this width

this is a table cell with this width

this is a table cell with this width

You will see the that date will move to the right edge of the browser, NOT the right edge of the table. I want the date to align with the right edge of the table.

Did I miss something?

Best,
David

You'll need to control the width of that div with the red background then either give it a width equal to the table or perhaps a fixed width for IE and display:table for modern browsers.

The tricky thing is that the table data is generated dynamically and its width varies from one query to another. I hope to display the results in IE5, IE6 and FF 1.5.x. No way for pure CSS?

"perhaps a fixed width for IE and display:table for modern browsers..." What do you mean by that? How do I do it? What browsers/versions?

Best,
David

Ignore this if I'm off base; have only skimmed most of the thread.

You say that the date is not a part of the data, but is it not table meta-data?

Widget Sales by Quarter


{date}


column header
...




{data}
...

=============
table {
border-collapse: collapse;
}

th, td {
border: 1px solid black;
padding: 3px;
}

th.date {
border: none;
text-align: right;
}
I think that'll do something like you want, and not create any issues with mid tier templating.

cheers,

gary

I can do it easily enough in modern browsers but afraid simply haven't the time to play with getting it to work for IE it's too much hassle.

I more interested in what this date is? you seem to think it's irrelevant but no data is it has to belong to something, I think your thinking this out wrong possibly.

What's the date pertain to? the table data? in which case then that date becomes character data for the caption tag of the table and titles the table then you only need worry about the table not a div holding it.

Hugo.

Edit/ can't believe it just noticed that Gary squeezed in ahead of me :rolleyes: what he said or as I say make the date the caption of the table

Gary and Hugo,

In my case, the complete html for the table data (from to ) is generated by a tool as a whole. I am simplying adding a timestamp onto it and make the timestamp align to the right side of the table. Do I have to resort to my old table approach?

Cheers,
David

What's your 'old table approach'? then

this is a table cell with this width

this is a table cell with this width

this is a table cell with this width

I am hoping to have a pure CSS approach to creating a containing box whose width is that of its widest element and that width sets the boundary (width) for other contained elements.

Cheers,
David

In my case, the complete html for the table data <snip> is generated by a tool as a whole. I am simplying adding a timestamp onto it and make the timestamp align to the right side of the table. Do I have to resort to my old table approach?
And you or your programmers can't open the tool up and modify for your needs?

I suppose, if you're not allowed to fix a broken tool, you'll have to wrap the output table in a wrapper table or a float div. You can center the wrapper table, which you can't do with the float. An AP wrapper is a no-go, as you don't want a major piece of content out of the flow.

cheers,

gary