CSS equivalent of single-cell table ?

[MangroveRoot]

I've looked for tutorials on how to do this for some years,
with no success.

Most of the time, I'm a good boy and only use <TABLE> (etc)
to format tabular data.

However, there remains one thing that <TABLE> does excellently
that I have yet to find a way to do using solely CSS:

Put a block of text *in a box*,
which box sizes itself to the size of the *content*,
not to some arbitrary fixed width or some percentage of the window.

E.g., the equivalent of:

<table border="5" frame="inset">
<tr><td bgcolor="red">
content
</td></tr>
</table>

I've tried things like:

<div style=" align:center;
border-width:5;
border-style:inset;
background-color:red;
">
content
</div>

but this (a) creates a box that takes up the entire width of the window,
leaving the content looking a little bit orphaned in the middle;
and (b) doesn't produce the same coloration of the border
(specifically, it produces black and grey,
instead of light-page-background and dark-page-background).

Surely CSS can do this; how?

 

[Ben C]

I've looked for tutorials on how to do this for some years,
with no success.

Most of the time, I'm a good boy and only use <TABLE> (etc)
to format tabular data.

However, there remains one thing that <TABLE> does excellently
that I have yet to find a way to do using solely CSS:

Put a block of text *in a box*,
which box sizes itself to the size of the *content*,
not to some arbitrary fixed width or some percentage of the window. [...]
Surely CSS can do this; how?

You need a "shrink-to-fit" box.

Apart from tables and table cells, floats, inline-blocks and
absolutely/fixed positioned boxes are shrink-to-fit.

Out of that lot floats are probably the simplest.

Put your content in a float, with auto width, and the float will shrink
to fit the content (according to CSS 2.1, in any half-decent
browser, and even in IE).

Of course you can't centre a float so I hope that's not your next
question.

 

[Bone Ur]

Well bust mah britches and call me cheeky, on Thu, 01 Nov 2007 23:01:54 GMT
MangroveRoot scribed:

I've looked for tutorials on how to do this for some years,
with no success.

Most of the time, I'm a good boy and only use <TABLE> (etc)
to format tabular data.

However, there remains one thing that <TABLE> does excellently
that I have yet to find a way to do using solely CSS:

Put a block of text *in a box*,
which box sizes itself to the size of the *content*,
not to some arbitrary fixed width or some percentage of the window.

Surely CSS can do this; how?

When I want to center a bordered-box with text, I usually size a div in ems
with relation to the text and use margin:auto (-and text-align:center if
necessary). Yes, I realized this isn't the same as having it accommodate
_completely random_ textual snippets, but most of the time that isn't the
case, anyway.

 

[MangroveRoot]

Of course you can't centre a float

Astounding.

> so I hope that's not your next question.

Actually, it is. I can do that with the much-deprecated tables,
why can't I do this with the much-vaunted CSS?

 

[Chris F.A. Johnson]

Astounding.

Why?

Actually, it is. I can do that with the much-deprecated tables,
why can't I do this with the much-vaunted CSS?

You can do it with CSS, but you don't use float:

#xx {
width: NNX;
margin: auto;
}

 

[Adrienne Boswell]

Gazing into my crystal ball I observed MangroveRoot <zcukpkn02
@sneakemail.com> writing in

Actually, it is. I can do that with the much-deprecated tables,
why can't I do this with the much-vaunted CSS?

You can't center a float because it would not be a float. A float takes
more and own item and _floats_ it next to another. Center takes one thing
and centers it. Now, you could put the floats that you wanted to center in
a container, and center _that_.

 

[Beauregard T. Shagnasty]

Astounding.

Liken a float to a pull-quote. Very seldom do you see a pull-quote in
the centre, but rather at one of the sides.

Actually, it is. I can do that with the much-deprecated tables,
why can't I do this with the much-vaunted CSS?

You can. You forgot to finish it. <g>

<div style=" align:center;
border-width:5;
border-style:inset;
background-color:red;
margin: 0 auto;
width: 10%;
">
content
</div>

Select a width that would be appropriate to your content. You can also
use em units for the width, say: width: 20em;
If you also want to centre the content, add: text-align: center;

Naturally, you would want to put the styling in a stylesheet, rather
than inline with the HTML.

You can also set borders like this, picking the colours of your choice:

border-top: 5px inset #d0d0d0;
border-left: 5px inset #d0d0d0;
border-right: 5px inset #a9a9a9;
border-bottom: 5px inset #a9a9a9;

BTW, your table example in your initial post is also the full width of
the browser window.

 

[Jonathan N. Little]

Actually, it is. I can do that with the much-deprecated tables,

No you cannot. Not have content wrap around both left and right!

why can't I do this with the much-vaunted CSS?

You can center with CSS if that is what you mean.

 

[Ben C]

Actually, it is. I can do that with the much-deprecated tables,
why can't I do this with the much-vaunted CSS?

I think that's me you're quoting. I can't remember what you were trying
to do, but it sounds like centred shrink-to-fit block.

Of course you can do that with CSS, using display: table or display:
inline-block, for example.

Just don't expect either to work in IE.

 

[dorayme]

I think that's me you're quoting. I can't remember what you were trying
to do, but it sounds like centred shrink-to-fit block.

Of course you can do that with CSS, using display: table or display:
inline-block, for example.

Just don't expect either to work in IE.

I think OP was wanting shrink to fit too and you addressed this
in your first reply. Perhaps this might help OP in some way:

http://tinyurl.com/32n6hm

 

[Jonathan N. Little]

I think OP was wanting shrink to fit too and you addressed this
in your first reply. Perhaps this might help OP in some way:

http://tinyurl.com/32n6hm

Well it works in real web browsers, but not any version of IE, cannot
speak for that odd Mac version.

 

[dorayme]

Well it works in real web browsers, but not any version of IE, cannot
speak for that odd Mac version.

Yes, I hope the tables work ok in IE! The sub heading for the
non-tables solution says "variable browser support" which is a
polite way of saying forget about IE. The tables solution was
meant to show ok in IE. Perhaps someone could be bothered to do
it so IE gets the tables and the rest get the display: table
instructions. I would rather cut off one of my antennae.

What is it with folk that they crave *so much* for centering? It
is like the junk food of webpage design... <g>

 

[Bone Ur]

Well bust mah britches and call me cheeky, on Mon, 05 Nov 2007 04:20:04 GMT
dorayme scribed:

Yes, I hope the tables work ok in IE! The sub heading for the
non-tables solution says "variable browser support" which is a
polite way of saying forget about IE. The tables solution was
meant to show ok in IE. Perhaps someone could be bothered to do
it so IE gets the tables and the rest get the display: table
instructions. I would rather cut off one of my antennae.

What is it with folk that they crave *so much* for centering? It
is like the junk food of webpage design... <g>

The pink background stuff centers (and "shrinks") in ie6. It all does so
in ff.

 

[BootNic]

Yes, I hope the tables work ok in IE! The sub heading for the
non-tables solution says "variable browser support" which is a
polite way of saying forget about IE. The tables solution was
meant to show ok in IE. Perhaps someone could be bothered to do
it so IE gets the tables and the rest get the display: table
instructions. I would rather cut off one of my antennae.

For inline content.

Wrap the content of all the div.centring with an inline element.

<div class="centring"><span>This is a centred shrink-to-fit div box.</span>
</div>

Then add a bit of css to correct the display for IE.

<!--[if IE]>
<style type="text/css">
div.centring {
/* reset for IE */
display:block;
padding:0;
border: none;
background-color: #f2f2f2;
text-align:center;
}
div.centring span {
display:inline-box;
text-align:left;
border: 1px solid #999;
background: #c5ffc5;
zoom:1;
}
</style>
<![endif]-->

I suppose that if one wants to support a mac IE then other corrections
would be required.

 

[dorayme]

Yes, I hope the tables work ok in IE! The sub heading for the
non-tables solution says "variable browser support" which is a
polite way of saying forget about IE. The tables solution was
meant to show ok in IE. Perhaps someone could be bothered to do
it so IE gets the tables and the rest get the display: table
instructions. I would rather cut off one of my antennae.

For inline content.

Wrap the content of all the div.centring with an inline element.

<div class="centring"><span>This is a centred shrink-to-fit div box.</span>
</div>

Then add a bit of css to correct the display for IE.

<!--[if IE]>
<style type="text/css">
div.centring {
/* reset for IE */
display:block;
padding:0;
border: none;
background-color: #f2f2f2;
text-align:center;
}
div.centring span {
display:inline-box;
text-align:left;
border: 1px solid #999;
background: #c5ffc5;
zoom:1;
}
</style>
<![endif]-->

I suppose that if one wants to support a mac IE then other corrections
would be required.

I have made some adjustments and added a section and a new page
to try to incorporate this idea, but it needs more work. I had
various problems and have given up for a moment... See:

http://tinyurl.com/32n6hm

and the linked page. On my winbox in IE 6 the borders around the
spans do not appear properly, nor the background colour nor is
the text left-aligned - though the spans are nicely centered!
Perhaps I have not implemented the idea properly?

Damn IE!

 

[BootNic]

dorayme wrote:

[snip]
Wrap the content of all the div.centring with an inline element.

<div class="centring"><span>This is a centred shrink-to-fit div
box.</span> </div>

NOTICE: the content needs to be wrapped in a span.

Then add a bit of css to correct the display for IE.

[snip]
I have made some adjustments and added a section and a new page
to try to incorporate this idea, but it needs more work. I had
various problems and have given up for a moment... See:

http://tinyurl.com/32n6hm

and the linked page. On my winbox in IE 6 the borders around the
spans do not appear properly, nor the background colour nor is
the text left-aligned - though the spans are nicely centered!
Perhaps I have not implemented the idea properly?

Damn IE!

It appears that you forgot to wrap the div content in a span.

 

[dorayme]

It appears that you forgot to wrap the div content in a span.

o sh... that's right.. they got lost in some fiddling. I had
other trouble with a previous template and there is usb stick
transfers between winbox and Mac and ... don't ask... <g>

Yes, now that I have simple overall page, it works well on my IE
6 as well as on Safari and probably FF too... Well done. I will
leave it up a while in case anyone finds it useful...