17 replies [Last post]
MDDZ
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-20
Posts: 9
Points: 0

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:

Hello, World!

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

MDDZ wrote:but I dont want

MDDZ wrote:
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. Wink

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).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

MDDZ
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-20
Posts: 9
Points: 0

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:

03/19/2007

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 7 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

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?

Verschwindende wrote:
  • CSS doesn't make pies

MDDZ
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-20
Posts: 9
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As Gary has said by

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

MDDZ
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-20
Posts: 9
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

.date { float:right; }<div

.date { float:right; }

03/19/2007

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

MDDZ
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-20
Posts: 9
Points: 0

That does not work

Hugo,

Try this code snippet with the float you suggested.

03/19/2007

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

MDDZ
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-20
Posts: 9
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

MDDZ
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-20
Posts: 9
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What's your 'old table

What's your 'old table approach'? then

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

MDDZ
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-20
Posts: 9
Points: 0

Here is my old table approach

03/19/2007

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

MDDZ wrote:Gary and

MDDZ wrote:
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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.