Hello, I hope to use DIV as a containing box of some content, but I dont want its width to be the width of its contained content. I want its width to be the width of its contained content. Think or try the following snippet:
The red color spreads to the whole width of a browser. That is NOT I want. I want red stops at the end of "Hello, World!".
The background for this is that I hope to use such DIV to grouping or aligning some content nicely. I have been using tables for this effect.
How can I use pure CSS for the same results?
Best,
David
MDDZ wrote:but I dont want
but I dont want its width to be the width of its contained content. I want its width to be the width of its contained content.
You've just contradicted yourself there.

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
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
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
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
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
:? As Gary has said by floating it, only to the right not the left
Hugo, thanks for your input.
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; }<div
.date {
float:right;
}
That does not work
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
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.
What if the table data is generated dynamically?
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;
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
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,
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
What's your 'old table approach'? then
Here is my old table approach
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
MDDZ wrote:Gary and
Gary and Hugo,
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