CSS equivalent of single-cell table ?

Discussion in 'HTML' started by MangroveRoot, Nov 1, 2007.

  1. MangroveRoot

    MangroveRoot Guest

    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?
     
    MangroveRoot, Nov 1, 2007
    #1
    1. Advertising

  2. MangroveRoot

    Ben C Guest

    On 2007-11-01, MangroveRoot <> wrote:
    > 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.
     
    Ben C, Nov 1, 2007
    #2
    1. Advertising

  3. MangroveRoot

    Bone Ur Guest

    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.

    --
    Bone Ur
    Cavemen have formidable pheromones.
     
    Bone Ur, Nov 1, 2007
    #3
  4. MangroveRoot

    MangroveRoot Guest

    > 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?
     
    MangroveRoot, Nov 4, 2007
    #4
  5. On 2007-11-04, MangroveRoot wrote:
    >
    >
    >> Of course you can't centre a float

    >
    > Astounding.


    Why?

    > > 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?


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

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

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Nov 4, 2007
    #5
  6. Gazing into my crystal ball I observed MangroveRoot <zcukpkn02
    @sneakemail.com> writing in news:9k8Xi.417$It.197@trndny06:

    >> 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?


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

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Nov 4, 2007
    #6
  7. MangroveRoot wrote:

    >> Of course you can't centre a float

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

    >> 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?


    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.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Nov 4, 2007
    #7
  8. MangroveRoot wrote:
    >> 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,


    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.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 4, 2007
    #8
  9. MangroveRoot

    Ben C Guest

    On 2007-11-04, MangroveRoot <> wrote:
    >> 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?


    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.
     
    Ben C, Nov 4, 2007
    #9
  10. MangroveRoot

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2007-11-04, MangroveRoot <> wrote:
    > >> 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?

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

    --
    dorayme
     
    dorayme, Nov 4, 2007
    #10
  11. dorayme wrote:

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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 5, 2007
    #11
  12. MangroveRoot

    dorayme Guest

    In article <61ada$472e9262$40cba7c6$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    >
    > > 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.


    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>

    --
    dorayme
     
    dorayme, Nov 5, 2007
    #12
  13. MangroveRoot

    Bone Ur Guest

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

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

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

    --
    Bone Ur
    Cavemen have formidable pheromones.
     
    Bone Ur, Nov 5, 2007
    #13
  14. MangroveRoot

    BootNic Guest

    dorayme <> wrote:
    news::

    > In article <61ada$472e9262$40cba7c6$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> dorayme wrote:
    >>
    >> > 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.

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

    --
    BootNic Tuesday November 6, 2007 1:02 PM
    Assert your right to make a few mistakes. If people can't accept your
    imperfections, that's their fault.
    *Dr. David M. Burns*
     
    BootNic, Nov 6, 2007
    #14
  15. MangroveRoot

    dorayme Guest

    In article <Xns99E084A4BB118BootNic@216.168.3.70>,
    BootNic <> wrote:

    > dorayme <> wrote:
    > news::
    >
    > > In article <61ada$472e9262$40cba7c6$>,
    > > "Jonathan N. Little" <> wrote:
    > >
    > >> dorayme wrote:
    > >>
    > >> > 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.

    > >
    > > 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!

    --
    dorayme
     
    dorayme, Nov 7, 2007
    #15
  16. MangroveRoot

    BootNic Guest

    dorayme <> wrote:
    news::

    > In article <Xns99E084A4BB118BootNic@216.168.3.70>,
    > BootNic <> wrote:
    >
    >> dorayme <> wrote:
    >> news::
    >>
    >>> In article <61ada$472e9262$40cba7c6$>,
    >>> "Jonathan N. Little" <> wrote:
    >>>
    >>>> 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.

    --
    BootNic Tuesday November 6, 2007 7:30 PM
    If you can learn from hard knocks, you can also learn from soft
    touches.
    *Carolyn Kenmore*
     
    BootNic, Nov 7, 2007
    #16
  17. MangroveRoot

    dorayme Guest

    In article <Xns99E0C695367D1BootNic@216.168.3.70>,
    BootNic <> wrote:

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

    --
    dorayme
     
    dorayme, Nov 7, 2007
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. coleenholley
    Replies:
    5
    Views:
    1,249
    coleenholley
    Jan 21, 2004
  2. Shiperton Henethe
    Replies:
    5
    Views:
    1,170
    Adrienne
    Sep 19, 2003
  3. Phillip Roncoroni
    Replies:
    14
    Views:
    1,140
    Toby A Inkster
    Apr 5, 2004
  4. Paul Schmidinger
    Replies:
    1
    Views:
    585
  5. Tom
    Replies:
    1
    Views:
    1,063
Loading...

Share This Page