|
|
Posted by BootNic on 11/29/05 01:33
> "Mr Perplexed" <mr.perplexed@gmail.com> wrote:
> news:1133126013.660877.273100@g43g2000cwa.googlegroups.com....
>
> <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.*
Navigation:
[Reply to this message]
|