Liquid box width

[Mr Perplexed]

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

 

[Chris Beall]

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

 

[Mr Perplexed]

Nice idea Chris. Unfortunately it's not cross-browser compatible. Works
on Firefox, not on IE6 though (suprise suprise).

 

[Barbara de Zoete]

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 |
`-------------------------------------------------- --<--@ ------------'

 

[Blinky the Shark]

What is a nice idea?


What isn't?


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.

 

[Barbara de Zoete]

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 |
`-------------------------------------------------- --<--@ ------------'

 

[Travis Newbury]

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

 

[Blinky the Shark]

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

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 the Shark]

Sounds like menopause to me...

Sounds like a solution to me.

 

[Travis Newbury]

Sounds like a solution to me.

Everyone gets what they want out of usenet.

 

[Mr Perplexed]

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.

 

[Travis Newbury]

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.

 

[Neredbojias]

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.

 

[BootNic]

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

 

[the idiot]

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?

 

[Ed]

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.