Centered boxes with tableless layout

[Ryan Stewart]

I'm tinkering with the whole tableless layout idea, but can't even figure a
good way to get a basic centered box on the screen. How do you do this
without a table:
<table style="margin-right: auto; margin-left: auto; border: 2px solid
#333399;">
<tr>
<td style="padding: 15px 30px;">
Some table content.
</td>
</tr>
</table

If you use a div, you have to specify a width, else it's a block element and
takes up 100% width. That's a bad idea because the font size may vary, and
there can be dynamic content in the box anyway. What element will
automatically wrap to minimum width like a table?

 

[DU]

I'm tinkering with the whole tableless layout idea, but can't even figure a
good way to get a basic centered box on the screen. How do you do this
without a table:
<table style="margin-right: auto; margin-left: auto; border: 2px solid
#333399;">
<tr>
<td style="padding: 15px 30px;">
Some table content.
</td>
</tr>
</table

If you use a div, you have to specify a width, else it's a block element and
takes up 100% width. That's a bad idea because the font size may vary, and
there can be dynamic content in the box anyway. What element will
automatically wrap to minimum width like a table?

Then do not specify a width with absolute length units but with relative
length units: either % (best IMO, most of the time) or em. It's
impossible to make any other suggestion without the ability to actually
examine your markup code, without understanding your webpage
requirements, etc...

DU

 

[Ryan Stewart]

Then do not specify a width with absolute length units but with relative
length units: either % (best IMO, most of the time) or em. It's
impossible to make any other suggestion without the ability to actually
examine your markup code, without understanding your webpage
requirements, etc...

DU

Regardless of the units you use, you're still guessing at the width. I don't
have any code right now. I'm just trying to figure out how to do this. As
for requirements, I want something that acts just like that table: something
on which the width is automatically adjusted to the bounds of the widest
thing in it and can be positioned in line with other content if necessary
(slap a "display: inline" on it, and you're good to go; try that with a div,
and your borders go all over, especially with multi-line content). I'm
looking for something that can be used as a container for things like a
login form, simple message box, possibly something like a viewing pane, etc.

 

[Chet]

| I'm tinkering with the whole tableless layout idea, but can't
even figure a
| good way to get a basic centered box on the screen. How do you
do this
| without a table:
| <table style="margin-right: auto; margin-left: auto; border:
2px solid
| #333399;">
| <tr>
| <td style="padding: 15px 30px;">
| Some table content.
| </td>
| </tr>
| </table
|
| If you use a div, you have to specify a width, else it's a
block element and
| takes up 100% width. That's a bad idea because the font size
may vary, and
| there can be dynamic content in the box anyway. What element
will
| automatically wrap to minimum width like a table?
|

Hi Ryan,

I've have a few samples that might help you, check out #2, 3 and
4. Then following the links to right or left column. These will
have a single column, right or left, I think two with fixed
widths and 1 set to %'s. This will hopefully give you an idea of
how to start your layout.

http://webpages.charter.net/rwtest/samples/index.htm

hth

 

[Ryan Stewart]

| I'm tinkering with the whole tableless layout idea, but can't
even figure a
| good way to get a basic centered box on the screen. How do you
do this
| without a table:
| <table style="margin-right: auto; margin-left: auto; border:
2px solid
| #333399;">
| <tr>
| <td style="padding: 15px 30px;">
| Some table content.
| </td>
| </tr>
| </table
|
| If you use a div, you have to specify a width, else it's a
block element and
| takes up 100% width. That's a bad idea because the font size
may vary, and
| there can be dynamic content in the box anyway. What element
will
| automatically wrap to minimum width like a table?
|

Hi Ryan,

I've have a few samples that might help you, check out #2, 3 and
4. Then following the links to right or left column. These will
have a single column, right or left, I think two with fixed
widths and 1 set to %'s. This will hopefully give you an idea of
how to start your layout.

http://webpages.charter.net/rwtest/samples/index.htm

hth

Those are very nicely done. I'll definitely spend a good bit of time
studying them. Thanks much.

 

[Chet]

| Those are very nicely done. I'll definitely spend a good bit of
time
| studying them. Thanks much.
|

You can e-mail me off the group should you have any specific
questions.

 

[DU]

figure a



Regardless of the units you use, you're still guessing at the width.

No. If width is declared 30% of its parent, then how can you tell that
I'm guessing the width? Because I've no idea how this will translate and
I have no idea how the DOM tree of nodes is arranged. 30% could be 200px
on a 640x480 and it could be 300px on a 1024x768 scr. res. This also
depends on the DOM tree containment hierarchy and how width is declared
for node containers.

I don't

have any code right now.

Then it's impossible to suggest something concrete regarding your
webpage situation, webpage context, webpage (specification) requirements.

I'm just trying to figure out how to do this. As

for requirements, I want something that acts just like that table

Just like which table exactly? Where is that table exactly? Google.com
has indexed over 10 billions webpages: now this table is in which
webpage? Can you understand my perspective here?

The more posters speak in general terms, abstract terms, without any
specifics, it become increasingly much more difficult to suggest anything.

: something

on which the width is automatically adjusted to the bounds of the widest
thing in it

something inside another thing happening in a page that has no code when
it displays in a browser on a os. See what I mean?


and can be positioned in line with other content

other content <sigh>

if necessary

(slap a "display: inline" on it, and you're good to go; try that with a div,
and your borders go all over, especially with multi-line content). I'm
looking for something that can be used as a container for things like a
login form, simple message box, possibly something like a viewing pane, etc.

When you'll be able to post something about that thing regarding what
you see, maybe someone will post something else about that... See what I
mean?

DU

 

[Ryan Stewart]

No. If width is declared 30% of its parent, then how can you tell that
I'm guessing the width?

Because how do you know the contents won't need 40% of the width? I'm
talking dynamic content here.

I'm just trying to figure out how to do this. As

Just like which table exactly? Where is that table exactly? Google.com
has indexed over 10 billions webpages: now this table is in which
webpage? Can you understand my perspective here?

The table I posted from the very beginning! The one that's still quoted in
this reply!

*snip the rest*
I'm getting the impression that either you are being difficult or you are as
intelligent as a trout. Judging from your multitude of other posts to this
and other newsgroups, I highly suspect that it's the former. Therefore, I'll
try one more time. Here's a complete page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
<title>A page with little content</title>
</head>
<body>
<table style="margin-right: auto; margin-left: auto;
border: 2px solid #333399;">
<tr>
<td style="padding: 15px 30px;">
Some table content.
</td>
</tr>
</table>
</body>
</html>

If you take the time to see what it looks like in a browser, you'll see the
text "Some table content." inside a blue rectangle centered horizontally on
the screen. My question is simply: how can I achieve an identical appearance
without using a table? The stipulation is that the text within it may change
in length, though not drastically. Therefore, the width of the container
should be dynamic based on its contents.

 

[Neil Marshall]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
<title>A page with little content</title>
</head>
<body>
<table style="margin-right: auto; margin-left: auto;
border: 2px solid #333399;">
<tr>
<td style="padding: 15px 30px;">
Some table content.
</td>
</tr>
</table>
</body>
</html>

This code works in Gecko rendering engines and Opera (Probably Safari
too but I don't have a mac). Fails in WinIE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
<title>A page with little content</title>
<style type="text/css">
#centeredDiv {
display: table;
margin: 0px auto 0px auto;
padding: 15px 30px;
border: 2px solid #333399;
}
</style>
</head>
<body>
<table style="margin-right: auto; margin-left: auto;
border: 2px solid #333399;">
<tr>
<td style="padding: 15px 30px;">
Some table content.
</td>
</tr>
</table>
<div id="centeredDiv">Some div content.</div>
</body>
</html>

 

[Ryan Stewart]

This code works in Gecko rendering engines and Opera (Probably Safari
too but I don't have a mac). Fails in WinIE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
<title>A page with little content</title>
<style type="text/css">
#centeredDiv {
display: table;
margin: 0px auto 0px auto;
padding: 15px 30px;
border: 2px solid #333399;
}
</style>
</head>
<body>
<table style="margin-right: auto; margin-left: auto;
border: 2px solid #333399;">
<tr>
<td style="padding: 15px 30px;">
Some table content.
</td>
</tr>
</table>
<div id="centeredDiv">Some div content.</div>
</body>
</html>

Great! Looks like the "display: table" is exactly what I was looking for.
Looking at the spec, it makes the element behave like a table? So what do
the adamant anti-table-layout-ists say about it? How would you suggest
fudging it to make it also compatible with IE? Or would that be too much of
a mess?

 

[Neil Marshall]

Great! Looks like the "display: table" is exactly what I was looking for.
Looking at the spec, it makes the element behave like a table? So what do
the adamant anti-table-layout-ists say about it? How would you suggest
fudging it to make it also compatible with IE? Or would that be too much of
a mess?

Yeah, it makes it resize like a table, but without the semantic markup
of a table.
As for getting it to work in IE? I'm not sure it's possible. There may
be some obscure way, but you should bug Microsoft about it I guess. Not
like I think they'd listen though.

 

[Michael Jaeger]

Yeah, it makes it resize like a table, but without the semantic markup
of a table.
As for getting it to work in IE? I'm not sure it's possible. There
may be some obscure way, but you should bug Microsoft about it I
guess. Not like I think they'd listen though.

just checked with IE - it works fine.
Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
<title>A page with little content</title>
<style type="text/css">
#centeredDiv {
display: table;
text-align: center;
margin: 50px 400px 50px 400px;
padding: 15px 30px;
border: 2px solid #333399;
}
</style>
</head>
<body>
<table style="margin-right: auto; margin-left: auto;
border: 2px solid #333399;">
<tr>
<td style="padding: 15px 30px;">
Some table content.
</td>
</tr>
</table>
<div id="centeredDiv">Some div content.</div>
</body>
</html>

Mike

 

[Neil Marshall]

Neil Marshall wrote:




just checked with IE - it works fine.

What version of IE are you using? It's both equally messed up here in
Mozilla and IE with your code. Remove the margins, and it goes back to
busted again in IE... except the text is now centered..

 

[Michael Jaeger]

What version of IE are you using? It's both equally messed up here in
Mozilla and IE with your code. Remove the margins, and it goes back
to busted again in IE... except the text is now centered..

I run IE 6.01 (all patches installed) and it works fine. However, I have
to admit that it looks bad in Netscape 7.1 and Opera 7.11.

So, we may have to look at the problem from a different angle, too.

Mike