Stylesheets - Divs Can't Replace A Table

Author

Divs Can't Replace A Table

Tyler Carver

2004-07-21, 7:17 pm

I would like to do something that seems so basic with two div's but I
don't think it can be done. Tables can do it in a snap. I was
convinced that css was the way to go for layout but without being able
to do even the easiest things, I don't see how.

Here is the table way to do the layout (I want this to work in
compliance mode in all modern browsers.):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px;height:100%;}
</style>
</head>
<body>
<table style="height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color:blue">
Some Text
</td>
<td style="background-color:red;width:100%;text-align:center">
<div style="width:400px">
A Lot More Text A Lot More Text
</div>
</td>
</tr>
</table>
</body>
</html>

I want to have the left column shrink to fit the text and the right
column to be a 100% of the left over viewport. Sounds simple.

Here's what won't work in IE. You'll notice that as soon as you touch
the 400px div with the viewport the whole thing drops to the bottom.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{float:left;height:100%;background-color:blue;}
#content{height:100%;background-color:red;text-align:center;}
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div style="width:400px">
A Lot More Text A Lot More Text
</div>
</div>
</body>
</html>

Tyler

Rainbow News Service

2004-07-21, 11:16 pm

Tyler Carver wrote:

> I want to have the left column shrink to fit the text and the right
> column to be a 100% of the left over viewport. Sounds simple.
>
> Here's what won't work in IE. You'll notice that as soon as you touch
> the 400px div with the viewport the whole thing drops to the bottom.
>
> <!doctype html public "-//w3c//dtd html 4.0 transitional//en"
> "http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
> <html>
> <head>
> <style type="text/css">
> body{margin:0px;height:100%;}
> #nav{float:left;height:100%;background-color:blue;}
> #content{height:100%;background-color:red;text-align:center;}
> </style>
> </head>
> <body>
> <div id="nav">
> Some Text
> </div>
> <div id="content">
> <div style="width:400px">
> A Lot More Text A Lot More Text
> </div>
> </div>
> </body>
> </html>
>

Yes this is called a liquid layout, which you have created by using
relative positioning, which is the default for css. If you don't want
anything to move, use absolute positioning. Here is one way to do it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>

Red

2004-07-21, 11:16 pm

Tyler Carver wrote:

> I want to have the left column shrink to fit the text and the right
> column to be a 100% of the left over viewport. Sounds simple.
>
> Here's what won't work in IE. You'll notice that as soon as you touch
> the 400px div with the viewport the whole thing drops to the bottom.
>
> <!doctype html public "-//w3c//dtd html 4.0 transitional//en"
> "http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
> <html>
> <head>
> <style type="text/css">
> body{margin:0px;height:100%;}
> #nav{float:left;height:100%;background-color:blue;}
> #content{height:100%;background-color:red;text-align:center;}
> </style>
> </head>
> <body>
> <div id="nav">
> Some Text
> </div>
> <div id="content">
> <div style="width:400px">
> A Lot More Text A Lot More Text
> </div>
> </div>
> </body>
> </html>
>
>

This is called a liquid layout, which you have created by using relative
positioning, which is the default for css. If you don't want anything to
move, use absolute positioning. Here is one way to do it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>

Jan Roland Eriksson

2004-07-21, 11:16 pm

On 21 Jul 2004 14:24:02 -0700, xfreshy222-2@yahoo.com (Tyler Carver)
wrote:

>I would like to do something that seems so basic with two div's but I
>don't think it can be done...

Sure you can; there's a lot of interesting ideas that can be realized
already with CSS1 properties only.

<http://www.css.nu/articles/table-in-css.html>

You should of course forget the use of a "Transitional" <DOCTYPE...
declaration and make sure that your browser operates in its best
possible rendering mode.

--
Rex

Alan J. Flavell

2004-07-21, 11:16 pm

On Wed, 21 Jul 2004, Red wrote:

> This is called a liquid layout, which you have created by using relative
> positioning, which is the default for css.

splendid.

> If you don't want anything to move, use absolute positioning.

If you don't want anything to move - think again. It's going to move
anyway, for some readers, so you might do better to work -with- the
properties of the medium. Some CSS properties are more suitable for
specific display situations, but are better avoided when the result
will be displayed over the whole range of display situations on the
WWW.

Unless you're a real wizard with graceful fallback techniques, but
then surely you'd know better than to ask for "nothing to move".

cheers

Spartanicus

2004-07-22, 4:16 am

Red <groups@reenie.org> wrote:

>This is called a liquid layout, which you have created by using relative
>positioning, which is the default for css.

Static is the default.

>If you don't want anything to
>move, use absolute positioning.

Many beginners make the mistake of thinking that css absolute
positioning is the way to create pixel prefect layouts that will look
the same in every css browser. Most of the time what they produce not
only does not achieve the desired goal, it fights the strengths of the
medium. There are relatively few cases where using css absolute
positioning makes sense, and in the cases where it does it requires
considerable skill to understand, implement and to reduce the associated
drawbacks (some are unavoidable).

Bottom line: stay away from absolute positioning until you are a skilled
css'er.

--
Spartanicus

Rainbow News Service

2004-07-22, 12:18 pm

Spartanicus wrote:
> Red <groups@reenie.org> wrote:
>
>
>
>
> Static is the default.
>
>
>
>
> Many beginners make the mistake of thinking that css absolute
> positioning is the way to create pixel prefect layouts that will look
> the same in every css browser. Most of the time what they produce not
> only does not achieve the desired goal, it fights the strengths of the
> medium. There are relatively few cases where using css absolute
> positioning makes sense, and in the cases where it does it requires
> considerable skill to understand, implement and to reduce the associated
> drawbacks (some are unavoidable).
>
> Bottom line: stay away from absolute positioning until you are a skilled
> css'er.
>
Are you really saying don't use absolute postitioning at all ? Most
layout tutorials such as http://bluerobot.com/web/layouts/layout1.html
use it to some extent.

What in particular are the drawbacks of the particular code I posted ?
I'll post it again below, and here is an url:
http://www.reenie.org/test/csstest.htm

It seemed to do what the original poster wanted. How would you make this
layout without using absolute positioning ?
The only reason I made the content column absolute is that height:100%
doesn't work with relative positioning, and it seemed like the original
poster wanted the columns to fill the screen. The original poster also
complained that the right hand column moved to the bottom when the
screen is narrow- and I agree it can be ugly when that happens.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>

Red

2004-07-22, 12:18 pm

Spartanicus wrote:
> Red <groups@reenie.org> wrote:
>
>
>
>
> Static is the default.
>

relative positioning is static ? How is that ? Doesn't make any sense to
me. I seems that absolute positioning would be considered static, and
it surely is not the default.
>
>
>
> Many beginners make the mistake of thinking that css absolute
> positioning is the way to create pixel prefect layouts that will look
> the same in every css browser. Most of the time what they produce not
> only does not achieve the desired goal, it fights the strengths of the
> medium. There are relatively few cases where using css absolute
> positioning makes sense, and in the cases where it does it requires
> considerable skill to understand, implement and to reduce the associated
> drawbacks (some are unavoidable).
>
> Bottom line: stay away from absolute positioning until you are a skilled
> css'er.
>
Are you really saying don't use absolute postitioning at all ? Most
layout tutorials such as http://bluerobot.com/web/layouts/layout1.html
use it to some extent.

What in particular are the drawbacks of the particular code I posted ?
I'll post it again below, and here is an url:
http://www.reenie.org/test/csstest.htm

It seemed to do what the original poster wanted.
The only reason I made the content column absolute is that height:100%
doesn't work with relative positioning, and it seemed like the original
poster wanted the columns to fill the screen. The original poster also
complained that the right hand column moved to the bottom when the
screen is narrow- and I agree it can be ugly when that happens.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>

Johannes Koch

2004-07-22, 12:18 pm

Red wrote:
> Spartanicus wrote:
>
>
> relative positioning is static ? How is that ? Doesn't make any sense to
> me. I seems that absolute positioning would be considered static, and
> it surely is not the default.

Read in the CSS spec about positioning. Values are 'static', 'relative',
'absolute', or 'fixed'. The default is 'static'.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Red

2004-07-22, 12:18 pm

Johannes Koch wrote:

>
> Read in the CSS spec about positioning. Values are 'static', 'relative',
> 'absolute', or 'fixed'. The default is 'static'.

OK sorry. I thought had I read it some book, but I guess I was mistaken.

red

Spartanicus

2004-07-22, 12:18 pm

Red <groups@reenie.org> wrote:

>Most
>layout tutorials such as http://bluerobot.com/web/layouts/layout1.html
>use it to some extent.

Most web layout tutorials are poor quality, copying code from the web
without an understanding of how it works is not the way to go.

> What in particular are the drawbacks of the particular code I posted ?

Can't say without actual content.

>It seemed to do what the original poster wanted.

Including the horizontal scrollbar?

>the original poster wanted the columns to fill the screen.

People want things they shouldn't be wanting.

--
Spartanicus

Alan J. Flavell

2004-07-22, 12:18 pm

On Thu, 22 Jul 2004, Alan J. Flavell wrote:

> On Wed, 21 Jul 2004, Red wrote:
>
>
> splendid.

Of course I have to correct myself for technical accuracy: the
"splendid" remark was directed to the fluid layout. I'm afraid I
failed to spot the "relative positioning ... default for CSS" detail,
which of course is wrong. Sorry about that, good job that someone else
picked it up.

Tyler Carver

2004-07-22, 7:18 pm

Rainbow News Service <news@rainbowfamily.info> wrote in message news:<WWCLc.20269344$Of.3361812@news.easynews.com>...
> Tyler Carver wrote:
>
>
> Yes this is called a liquid layout, which you have created by using
> relative positioning, which is the default for css. If you don't want
> anything to move, use absolute positioning. Here is one way to do it:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>test</title>
> <style type="text/css">
> body{margin:0px;height:100%;}
> #nav{position:absolute; background-color:blue; width:100px;
> height:100%;}
> #content{position:absolute; left:100px; width:100%; height:100%;
> background-color:red; text-align:center; }
> </style>
> </head>
> <body>
> <div id="nav">
> Some Text
> </div>
> <div id="content">
> A Lot More Text A Lot More Text
> </div>
> </body>
> </html>

Thanks for the sample code. This method does not create a wrapping I
want for the left column. The width was specified by 100px, this is
what I don't want. I want the width to stretch to contain anything
placed in the div (text for this example).

This is the whole idea. I want strechy for the left column and 100%
of the left over for the right column and I don't want the right
column content to shift down underneith the left column.

Tyler Carver

2004-07-22, 7:18 pm

Jan Roland Eriksson <rex@css.nu> wrote in message news:<2ovtf0h1v5int5i8luou7ao6dd6oeqdksa@4ax.com>...
> On 21 Jul 2004 14:24:02 -0700, xfreshy222-2@yahoo.com (Tyler Carver)
> wrote:
>
>
> Sure you can; there's a lot of interesting ideas that can be realized
> already with CSS1 properties only.
>
> <http://www.css.nu/articles/table-in-css.html>
>
> You should of course forget the use of a "Transitional" <DOCTYPE...
> declaration and make sure that your browser operates in its best
> possible rendering mode.

Thanks for the page reference, however, this doesn't meet my need
either. You will notice in their css

DIV.left-container2 {
border: none; float: left; margin: 0; padding: 0; width: 50%;
}

DIV.right-container2 {
border: none; float: right; margin: 0; padding: 0; width: 50%;
}

that they specify the width. This is the idea I'm trying to avoid. I
want the width of the left column to be determined by what it
contains. I want the div to hug the content and I want to have the
second column to take up the rest of the space.

Tyler Carver

2004-07-22, 7:18 pm

Spartanicus <me@privacy.net> wrote in message

>
>
> Including the horizontal scrollbar?

???

>
>
> People want things they shouldn't be wanting.

This about sums up CSS in a nutshell, and is, not to mention, one of
the dumbest statements I've heard in a news group. Columns on a Web
site with different background colors that fill the view port, YA,
that is absurd, why would I want that? I shouldn't. Div's that don't
drop out of view when a pixel goes beyond the view port, div's that
stretch vertically, all dumb. In fact why do we have div's that
stretch horizontally, that doesn't make sense either.

"Vertical stretch
One of the somewhat frustrating properties of CSS is the fact that
elements only stretch vertically as far as they need to. Meaning, if a
200-pixel tall image is contained within a <div>, the <div> will only
expand down the page 200 pixels.
"
Faux Columns
by Dan Cederholm
http://www.alistapart.com/articles/fauxcolumns

Ya, hack after hack to get css to do the simplest things.

PeterMcC

2004-07-22, 7:18 pm

Tyler Carver wrote in
<813bb307.0407211324.3e07057c@posting.google.com>

I think you're absolutely right, divs can't replace a table; however, I
don't think that they're supposed to. In the same way, tables are not
supposed to be a means of importing print design methods into web layout.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Jan Roland Eriksson

2004-07-22, 7:18 pm

On 22 Jul 2004 09:40:37 -0700, xfreshy222-2@yahoo.com (Tyler Carver)
wrote:

>Jan Roland Eriksson <rex@css.nu> wrote in message
>news:<2ovtf0h1v5int5i8luou7ao6dd6oeqdksa@4ax.com>...

[color=darkred]
[color=darkred]
[color=darkred]
>...this doesn't meet my need...

Well; what you "need" may very well be within reach with CSS but
probably only if you are willing to leave the Microsoft "OS-component"
behind. Even more so if you insist on referring to the "Transitional"
syntax definition instead of the more suitable "strict" syntax def.

>...You will notice in their css...
>...that they specify the width.

[yea; I know what it says, I wrote it :-) ]

>This is the idea I'm trying to avoid. I want the width of the left
>column to be determined by what it contains. I want the div to hug
>the content and I want to have the second column to take up the
>rest of the space.

You need to study this part of the CSS spec, for now and for your
future...

<http://www.w3.org/TR/CSS21/visuren.html#propdef-display>

....also you may want to have a look at Eric's "Complex Spiral Demo" at

<http://www.meyerweb.com/eric/css/ed...piral/demo.html>

It may be a good compromise solution to what you are opting for, by and
large, but beware that only Mozilla and Opera gives a correct rendering
here, MSIE is in error (its box model rendering is severely broken in
fact)

If you are not satisfied with any of the info you have already been
given, maybe it's time to rethink your design?

--
Rex

Christoph Paeper

2004-07-23, 4:15 am

*Tyler Carver* <xfreshy222-2@yahoo.com>:
>
> Ya, hack after hack to get css to do the simplest things.

s/the simplest things/things CSS was not designed to do or that (some)
browsers don't support (yet)/

OTOH I can't think of one thing CSS2 can't do that presentational HTML
could do (apart from table layouts using 'rowspan' and 'colspan').

--
"Censorship, like charity, should begin at home;
but, unlike charity, it should end there."

Clare Booth Luce

Tyler Carver

2004-07-23, 7:17 pm

Jan Roland Eriksson <jrexon@newsguy.com> wrote in message news:<unb0g0p1rjo0qpphp7mri954lgghejs664@4ax.com>...
> On 22 Jul 2004 09:40:37 -0700, xfreshy222-2@yahoo.com (Tyler Carver)
> wrote:
>
> Well; what you "need" may very well be within reach with CSS but
> probably only if you are willing to leave the Microsoft "OS-component"
> behind. Even more so if you insist on referring to the "Transitional"
> syntax definition instead of the more suitable "strict" syntax def.

OK. I agree with this, I changed my header to:

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

>
>
> [yea; I know what it says, I wrote it :-) ]

OK. I can see what I wanted to do have a left column sized depending
on it's contents can't be done. I would still like to use the absolute
positioning to do it. I will fix the width of the left column.

However, there is still a problem, I'm sure this one is fixable. I
want my right column to have it's 100% width take up the rest of the
viewport and not send it off the screen. As seen here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; }

#centered{width:100%; background-color:#FFFF00; text-align:center;
}

</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
<div id="centered">
Centered message!
</div>
</div>
</body>
</html>

The centering is fixed in Mozilla and Opera with this:
#content{position:absolute; left:100px; right:0px; height:100%;
background-color:red; }

But it is no surprise that IE. can't handle it. IE is fixed with this
however:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;z-index:2}
#content{position:absolute; left:0px; right:0px; height:100%;
background-color:red; border-left: solid 100px black;z-index:1}

#contentInside{width:100%;}
#centered{width:100%; background-color:#FFFF00; text-align:center;
}

</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div id="contentInside">
A Lot More Text A Lot More Text
<div id="centered">
Centered message!
</div>
</div>
</div>
</body>
</html>

>
> You need to study this part of the CSS spec, for now and for your
> future...
>
> <http://www.w3.org/TR/CSS21/visuren.html#propdef-display>
>
> ...also you may want to have a look at Eric's "Complex Spiral Demo" at
>
> <http://www.meyerweb.com/eric/css/ed...piral/demo.html>

I've seen the Complex Spiral. It pained me to know that the
background effect is not possible in IE 6.0.

> If you are not satisfied with any of the info you have already been
> given, maybe it's time to rethink your design?

I still think that design shouldn't have been limited my the CSS spec,
instead it should have been enabled by it. I, however, will stick
with it because I do believe that content must be separated from
layout.

Thanks for your post,
Tyler

boclair

2004-07-24, 4:15 am

"Tyler Carver" <xfreshy222-2@yahoo.com> wrote in message
news:813bb307.0407230926.36bc73cd@posting.google.com...

>
> OK. I can see what I wanted to do have a left column sized depending
> on it's contents can't be done. I would still like to use the absolute
> positioning to do it. I will fix the width of the left column.
>
> However, there is still a problem, I'm sure this one is fixable. I
> want my right column to have it's 100% width take up the rest of the
> viewport and not send it off the screen. As seen here:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>test</title>
> <style type="text/css">
> body{margin:0px;height:100%;}
> #nav{position:absolute; background-color:blue; width:100px;
> height:100%;}
> #content{position:absolute; left:100px; width:100%; height:100%;
> background-color:red; }
>
> #centered{width:100%; background-color:#FFFF00; text-align:center;
> }
>
> </style>
> </head>
> <body>
> <div id="nav">
> Some Text
> </div>
> <div id="content">
> A Lot More Text A Lot More Text
> <div id="centered">
> Centered message!
> </div>
> </div>
> </body>
> </html>

Another approach is to place nav over the left border of content and declare
the red background color on the body element. Something like this for the
styling

<style type="text/css">

</style>

Louise

Peter Jones

2004-07-24, 11:15 pm

Jan Roland Eriksson <rex@css.nu> wrote in
news:2ovtf0h1v5int5i8luou7ao6dd6oeqdksa@4ax.com:

> <http://www.css.nu/articles/table-in-css.html>

Interesting article, until I found this: "This example should illustrate a
more realistic version of a table that actually has some tabular data in
it."

Um, surely the best way to present TABULAR DATA is with a TABLE -- that is
what they are for, and the code for the example which followed effectively
destroyed the semantic meaning of what was being presented, which seems
just plain WRONG (being the very reason for moving away from TABLEs for
layout purposes...)

*shrug*