Liquid box width

Discussion in 'HTML' started by Mr Perplexed, Nov 25, 2005.

  1. Mr Perplexed

    Mr Perplexed Guest

    Hi,

    I want to create a box containing some content on my web page. I do not
    want the box to be the full width of the page but neither do I want to
    specify the width of the box (in ems or pixels or percentage). Instead
    I want the box to grow to fit the width of the content. I also want the
    box to be centered.

    If I use a div and leave the width undefined or set it to auto, the div
    expands to the full width of its containing element - the page. To make
    the div less than the full page width I have to set an width in pixels
    or %, which means the div width does not flow tightly round its
    content.

    If I float the div (float:left), ta-daam, it now magically sets its
    width correctly (according to its content), but now it's a pain in the
    arse to center it. I also have to add an element below it to clear the
    float. Similarly, setting position:absolute makes the width fluid but
    destroys the layout of the rest of the page.

    So I'm stumped. The solution I am using at the moment is a <gasp> one
    cell table wrapped around my content box div. Setting the table style
    to margin:0 auto means the table gets centered on the page, and because
    it's a table (now I remember why we loved these things) it wraps itself
    fluidly around whatever content it contains. But obviously tables are
    evil and must be banished, so if anyone has any alternative ideas I'd
    love to hear them.

    Thanks
     
    Mr Perplexed, Nov 25, 2005
    #1
    1. Advertising

  2. Mr Perplexed

    Chris Beall Guest

    Mr Perplexed wrote:
    > Hi,
    >
    > I want to create a box containing some content on my web page. I do not
    > want the box to be the full width of the page but neither do I want to
    > specify the width of the box (in ems or pixels or percentage). Instead
    > I want the box to grow to fit the width of the content. I also want the
    > box to be centered.
    >
    > If I use a div and leave the width undefined or set it to auto, the div
    > expands to the full width of its containing element - the page. To make
    > the div less than the full page width I have to set an width in pixels
    > or %, which means the div width does not flow tightly round its
    > content.
    >
    > If I float the div (float:left), ta-daam, it now magically sets its
    > width correctly (according to its content), but now it's a pain in the
    > arse to center it. I also have to add an element below it to clear the
    > float. Similarly, setting position:absolute makes the width fluid but
    > destroys the layout of the rest of the page.
    >
    > So I'm stumped. The solution I am using at the moment is a <gasp> one
    > cell table wrapped around my content box div. Setting the table style
    > to margin:0 auto means the table gets centered on the page, and because
    > it's a table (now I remember why we loved these things) it wraps itself
    > fluidly around whatever content it contains. But obviously tables are
    > evil and must be banished, so if anyone has any alternative ideas I'd
    > love to hear them.
    >
    > Thanks
    >

    Mr. P,

    Try <div style="display: table">

    Chris Beall
     
    Chris Beall, Nov 26, 2005
    #2
    1. Advertising

  3. Mr Perplexed

    Mr Perplexed Guest

    Nice idea Chris. Unfortunately it's not cross-browser compatible. Works
    on Firefox, not on IE6 though (suprise suprise).
     
    Mr Perplexed, Nov 27, 2005
    #3
  4. On Sun, 27 Nov 2005 09:09:54 +0100, Mr Perplexed <>
    wrote:

    > Nice idea Chris.


    What is a nice idea?

    > Unfortunately it's not cross-browser compatible.


    What isn't?

    > Works
    > on Firefox, not on IE6 though (suprise suprise).


    What does?

    Please quote properly:
    <URL:http://www.safalra.com/special/googlegroupsreply/>


    I just don't understand you google.group guys. Had you shown any interest
    in this group or in usenet newsgroups in general, you would have noticed
    how participants post and reply. At least you would have come across a
    recent post showing the above URL.
    For me this is the end for google.groups now. Quite honestly, I've had it
    with you lot. Because of the hit and run nature of your participating in
    newsgroups, you just miss what's relevant for communications. I dislike
    that behaviour more and more now. So, for my good, any post containing the
    header groups.google.com is from now on kill filed.

    Well done, Mr Perplexed. You're maybe not the cause all by yourself, but
    certainly the trigger.

    hand



    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Nov 27, 2005
    #4
  5. Barbara de Zoete wrote:

    > On Sun, 27 Nov 2005 09:09:54 +0100, Mr Perplexed
    > <> wrote:
    >
    >> Nice idea Chris.

    >
    > What is a nice idea?
    >
    >> Unfortunately it's not cross-browser compatible.

    >
    > What isn't?
    >
    >> Works
    >> on Firefox, not on IE6 though (suprise suprise).

    >
    > What does?
    >
    > Please quote properly:
    > <URL:http://www.safalra.com/special/googlegroupsreply/>
    >
    > I just don't understand you google.group guys. Had you shown any
    > interest in this group or in usenet newsgroups in general, you
    > would have noticed how participants post and reply. At least
    > you would have come across a recent post showing the above URL.
    > For me this is the end for google.groups now. Quite honestly,
    > I've had it with you lot. Because of the hit and run nature of
    > your participating in newsgroups, you just miss what's relevant
    > for communications. I dislike that behaviour more and more now.
    > So, for my good, any post containing the header
    > groups.google.com is from now on kill filed.
    >
    > Well done, Mr Perplexed. You're maybe not the cause all by
    > yourself, but certainly the trigger.


    Barbara, may I quote that passage on the page shown in my sig, as
    an "other voices" insert, the way I have done with Ohmster's and
    Ben's comments (also with permission)? I'd elide the references
    to the URL you mantion and the paragraph that specifically
    addresses Mr Perplexed by name, to keep it more general. Thus,
    I'd use:

    <q>

    I just don't understand you google.group guys. Had you shown any
    interest in this group or in usenet newsgroups in general, you
    would have noticed how participants post and reply.... For me
    this is the end for google.groups now. Quite honestly, I've had it
    with you lot. Because of the hit and run nature of your
    participating in newsgroups, you just miss what's relevant
    for communications. I dislike that behaviour more and more now.
    So, for my good, any post containing the header groups.google.com
    is from now on kill filed.

    </q>

    With your permission, I would put it up, and give you credit as I
    did the others (unless you'd rather it be attributed to "another
    Usenet participant".

    Thanks for your consideration. I like it because it concisely
    addresses G2 poster issues and - unlike the others - addresses
    them *for* a G2 poster.


    --
    Blinky
    Killing all Google Groups posts.
    http://blinkynet.net/comp/uip5.html
     
    Blinky the Shark, Nov 27, 2005
    #5
  6. On Sun, 27 Nov 2005 11:17:12 +0100, Blinky the Shark <>
    wrote:

    > Barbara de Zoete wrote:
    >
    >> I just don't understand you google.group guys. Had you shown any
    >> interest in this group or in usenet newsgroups in general, you
    >> would have noticed how participants post and reply. At least
    >> you would have come across a recent post showing the above URL.
    >> For me this is the end for google.groups now. Quite honestly,
    >> I've had it with you lot. Because of the hit and run nature of
    >> your participating in newsgroups, you just miss what's relevant
    >> for communications. I dislike that behaviour more and more now.
    >> So, for my good, any post containing the header
    >> groups.google.com is from now on kill filed.
    >>

    > Barbara, may I quote that passage on the page shown in my sig, as
    > an "other voices" insert, the way I have done with Ohmster's and
    > Ben's comments (also with permission)?
    > [ ... ]
    > With your permission, I would put it up, and give you credit as I
    > did the others (unless you'd rather it be attributed to "another
    > Usenet participant".


    By all means, you're welcome to quote it. I have no problem with
    attributing it to my name.


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Nov 27, 2005
    #6
  7. "Barbara de Zoete" <> said:

    > For me this is the end for google.groups now. Quite honestly,
    > I've had it with you lot. Because of the hit and run nature of
    > your participating in newsgroups, you just miss what's relevant
    > for communications. I dislike that behaviour more and more now.
    > So, for my good, any post containing the header
    > groups.google.com is from now on kill filed.
    >


    Sounds like menopause to me...

    --
    -=tn=-
     
    Travis Newbury, Nov 27, 2005
    #7
  8. Barbara de Zoete wrote:

    > On Sun, 27 Nov 2005 11:17:12 +0100, Blinky the Shark
    > <> wrote:


    <snippage>

    >> Barbara, may I quote that passage on the page shown in my sig,
    >> as an "other voices" insert, the way I have done with Ohmster's
    >> and Ben's comments (also with permission)?
    >> [ ... ]
    >> With your permission, I would put it up, and give you credit as
    >> I did the others (unless you'd rather it be attributed to
    >> "another Usenet participant".

    >
    > By all means, you're welcome to quote it. I have no problem with
    > attributing it to my name.


    Done, and thank you. http://blinkynet.net/comp/uip5.html

    --
    Blinky
    Killing all Google Groups posts.
    http://blinkynet.net/comp/uip5.html
     
    Blinky the Shark, Nov 27, 2005
    #8
  9. Travis Newbury wrote:

    > "Barbara de Zoete" <> said:
    >
    >> For me this is the end for google.groups now. Quite honestly,
    >> I've had it with you lot. Because of the hit and run nature of
    >> your participating in newsgroups, you just miss what's relevant
    >> for communications. I dislike that behaviour more and more now.
    >> So, for my good, any post containing the header
    >> groups.google.com is from now on kill filed.
    >>

    >
    > Sounds like menopause to me...


    Sounds like a solution to me.

    --
    Blinky
    Killing all Google Groups posts.
    http://blinkynet.net/comp/uip5.html
     
    Blinky the Shark, Nov 27, 2005
    #9
  10. Blinky the Shark <> said:
    >> Sounds like menopause to me...

    > Sounds like a solution to me.


    Everyone gets what they want out of usenet.


    --
    -=tn=-
     
    Travis Newbury, Nov 27, 2005
    #10
  11. Mr Perplexed

    Mr Perplexed Guest

    Barbara de Zoete wrote:

    > Please quote properly:
    > <URL:http://www.safalra.com/special/googlegroupsreply/>
    >
    > I just don't understand you google.group guys. Had you shown any interest
    > in this group or in usenet newsgroups in general, you would have noticed
    > how participants post and reply. At least you would have come across a
    > recent post showing the above URL.
    > For me this is the end for google.groups now. Quite honestly, I've had it
    > with you lot. Because of the hit and run nature of your participating in
    > newsgroups, you just miss what's relevant for communications. I dislike
    > that behaviour more and more now. So, for my good, any post containing the
    > header groups.google.com is from now on kill filed.
    >
    > Well done, Mr Perplexed. You're maybe not the cause all by yourself, but
    > certainly the trigger.


    Barbara,

    I now consider myself educated and admonished. Apologies for pushing
    you over the edge. Unfortunately I guess that now you _have_ plummited
    over the edge and down to the bottom of the Google Groups ravine,
    you're not going to read this, but my apology still stands, read or
    not.

    Nevertheless, I do feel a bit flamed. I'm a groups/usenet newbie and I
    posted in what seemed to be reasonable and polite way, based on how I
    had observed others posting. I'm very happy to be steered and corrected
    in protocol, but a bit less 'rant' would have been nice.

    Anyway, still no closer to my elusive auto-resizing centered div (to
    quote - as I now know is the appropriate thing to do):

    Start original post >>>>

    I want to create a box containing some content on my web page. I do not
    want the box to be the full width of the page but neither do I want to
    specify the width of the box (in ems or pixels or percentage). Instead
    I want the box to grow to fit the width of the content. I also want the
    box to be centered.

    If I use a div and leave the width undefined or set it to auto, the div
    expands to the full width of its containing element - the page. To make
    the div less than the full page width I have to set an width in pixels
    or %, which means the div width does not flow tightly round its
    content.

    If I float the div (float:left), ta-daam, it now magically sets its
    width correctly (according to its content), but now it's a pain in the
    arse to center it. I also have to add an element below it to clear the
    float. Similarly, setting position:absolute makes the width fluid but
    destroys the layout of the rest of the page.

    So I'm stumped. The solution I am using at the moment is a <gasp> one
    cell table wrapped around my content box div. Setting the table style
    to margin:0 auto means the table gets centered on the page, and because
    it's a table (now I remember why we loved these things) it wraps itself
    fluidly around whatever content it contains. But obviously tables are
    evil and must be banished, so if anyone has any alternative ideas I'd
    love to hear them.

    <<< End original post.
     
    Mr Perplexed, Nov 27, 2005
    #11
  12. "Mr Perplexed" <> said:

    > I now consider myself educated and admonished. Apologies for
    > pushing you over the edge. Unfortunately I guess that now you
    > _have_ plummited over the edge and down to the bottom of the
    > Google Groups ravine, you're not going to read this, but my
    > apology still stands, read or not.
    >


    There is little in this world less effective than a usenet apology.


    --
    -=tn=-
     
    Travis Newbury, Nov 27, 2005
    #12
  13. Mr Perplexed

    Neredbojias Guest

    With neither quill nor qualm, Mr Perplexed quothed:

    > Start original post >>>>
    >
    > I want to create a box containing some content on my web page. I do not
    > want the box to be the full width of the page but neither do I want to
    > specify the width of the box (in ems or pixels or percentage). Instead
    > I want the box to grow to fit the width of the content. I also want the
    > box to be centered.


    Let me ask why. There are some things that can be done, but I need to
    know what you're trying to accomplish with the suggested criteria, such
    as displaying a background, etc.

    > If I use a div and leave the width undefined or set it to auto, the div
    > expands to the full width of its containing element - the page. To make
    > the div less than the full page width I have to set an width in pixels
    > or %, which means the div width does not flow tightly round its
    > content.
    >
    > If I float the div (float:left), ta-daam, it now magically sets its
    > width correctly (according to its content), but now it's a pain in the
    > arse to center it. I also have to add an element below it to clear the
    > float. Similarly, setting position:absolute makes the width fluid but
    > destroys the layout of the rest of the page.
    >
    > So I'm stumped. The solution I am using at the moment is a <gasp> one
    > cell table wrapped around my content box div. Setting the table style
    > to margin:0 auto means the table gets centered on the page, and because
    > it's a table (now I remember why we loved these things) it wraps itself
    > fluidly around whatever content it contains. But obviously tables are
    > evil and must be banished, so if anyone has any alternative ideas I'd
    > love to hear them.
    >
    > <<< End original post.
    >
    >


    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Nov 28, 2005
    #13
  14. Mr Perplexed

    BootNic Guest

    > "Mr Perplexed" <> wrote:
    > news:....
    >
    > <snip>
    > Start original post >>>>
    >
    > I want to create a box containing some content on my web page. I do
    > not want the box to be the full width of the page but neither do I
    > want to specify the width of the box (in ems or pixels or
    > percentage). Instead I want the box to grow to fit the width of the
    > content. I also want the box to be centered.
    >
    > If I use a div and leave the width undefined or set it to auto, the
    > div expands to the full width of its containing element - the page.
    > To make the div less than the full page width I have to set an
    > width in pixels or %, which means the div width does not flow
    > tightly round its content.
    >
    > If I float the div (float:left), ta-daam, it now magically sets its
    > width correctly (according to its content), but now it's a pain in
    > the arse to center it. I also have to add an element below it to
    > clear the float. Similarly, setting position:absolute makes the
    > width fluid but destroys the layout of the rest of the page.
    >
    > So I'm stumped. The solution I am using at the moment is a <gasp>
    > one cell table wrapped around my content box div. Setting the table
    > style to margin:0 auto means the table gets centered on the page,
    > and because it's a table (now I remember why we loved these things)
    > it wraps itself fluidly around whatever content it contains. But
    > obviously tables are evil and must be banished, so if anyone has
    > any alternative ideas I'd love to hear them.
    >
    > <<< End original post.


    cross browser compatible?? I don't know.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title></title>
    <style type="text/css">
    #sam{
    background-color: #FFCC33;
    color: #000000;
    display: inline-table;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    padding: 10px;
    width:0;
    }
    #sam p{
    background-color: inherit;
    color: #000099;
    font-family: "comic sans ms","times new roman", times, serif;
    font-size: larger;
    margin: 0;
    white-space: pre;
    }
    </style>
    </head>

    <body>
    <div id="sam" style="display:table;">
    <p>Jack and Jill went up the hill
    To fetch a pail of water
    Jack fell down and broke his crown
    And Jill came tumbling after

    Up Jack got and down he trot
    As fast as he could caper
    And went to bed and covered his head
    In vinegar and brown paper

    When Jill came in how she did grin
    To see Jack's paper plaster
    Mother vexed, did whip her next
    For causing Jack's disaster</p>
    </div>
    </body>
    </html>

    --
    BootNic Monday, November 28, 2005 6:32 PM

    Our earth is degenerate in these latter days; bribery and corruption are common; children no longer obey their parents; and the end of the world is evidently approaching.
    *Assyrian clay tablet 2800 B.C.*
     
    BootNic, Nov 28, 2005
    #14
  15. Mr Perplexed

    the idiot Guest

    "Mr Perplexed" <> wrote in message
    news:...
    > Hi,
    >
    > I want to create a box containing some content on my web page. I do not
    > want the box to be the full width of the page but neither do I want to
    > specify the width of the box (in ems or pixels or percentage). Instead
    > I want the box to grow to fit the width of the content. I also want the
    > box to be centered.
    >
    > If I use a div and leave the width undefined or set it to auto, the div
    > expands to the full width of its containing element - the page. To make
    > the div less than the full page width I have to set an width in pixels
    > or %, which means the div width does not flow tightly round its
    > content.
    >
    > If I float the div (float:left), ta-daam, it now magically sets its
    > width correctly (according to its content), but now it's a pain in the
    > arse to center it. I also have to add an element below it to clear the
    > float. Similarly, setting position:absolute makes the width fluid but
    > destroys the layout of the rest of the page.
    >
    > So I'm stumped. The solution I am using at the moment is a <gasp> one
    > cell table wrapped around my content box div. Setting the table style
    > to margin:0 auto means the table gets centered on the page, and because
    > it's a table (now I remember why we loved these things) it wraps itself
    > fluidly around whatever content it contains. But obviously tables are
    > evil and must be banished, so if anyone has any alternative ideas I'd
    > love to hear them.
    >
    > Thanks


    why?
     
    the idiot, Dec 17, 2005
    #15
  16. Mr Perplexed

    Ed Guest

    Mr Perplexed wrote:
    > Hi,
    >
    > I want to create a box containing some content on my web page. I do not
    > want the box to be the full width of the page but neither do I want to
    > specify the width of the box (in ems or pixels or percentage). Instead
    > I want the box to grow to fit the width of the content. I also want the
    > box to be centered.
    >
    > If I use a div and leave the width undefined or set it to auto, the div
    > expands to the full width of its containing element - the page. To make
    > the div less than the full page width I have to set an width in pixels
    > or %, which means the div width does not flow tightly round its
    > content.
    >
    > If I float the div (float:left), ta-daam, it now magically sets its
    > width correctly (according to its content), but now it's a pain in the
    > arse to center it. I also have to add an element below it to clear the
    > float. Similarly, setting position:absolute makes the width fluid but
    > destroys the layout of the rest of the page.
    >
    > So I'm stumped. The solution I am using at the moment is a <gasp> one
    > cell table wrapped around my content box div. Setting the table style
    > to margin:0 auto means the table gets centered on the page, and because
    > it's a table (now I remember why we loved these things) it wraps itself
    > fluidly around whatever content it contains. But obviously tables are
    > evil and must be banished, so if anyone has any alternative ideas I'd
    > love to hear them.
    >
    > Thanks
    >

    Is it possible to give a URL with the problem? Would help loads.
     
    Ed, Dec 19, 2005
    #16
    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. AndrewF
    Replies:
    1
    Views:
    842
    Bruce Barker
    Oct 10, 2005
  2. Luigi Donatello Asero

    Width of a table for liquid design

    Luigi Donatello Asero, Mar 8, 2005, in forum: HTML
    Replies:
    0
    Views:
    448
    Luigi Donatello Asero
    Mar 8, 2005
  3. Coder
    Replies:
    1
    Views:
    728
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. Replies:
    0
    Views:
    544
  5. jenny wilkinson
    Replies:
    0
    Views:
    637
    jenny wilkinson
    Mar 20, 2013
Loading...

Share This Page