Transition from table layout to CSS: Am I stupid?

[Daniel Haude]

Hello,

I'm familiar with using tables for web page layout. Now I'm doing
a new page, and while I'm at it, I thought, why not do it right
and use only CSS and DIVs.

The page in question is a simple columnar layout. What I'd like
to accomplish is that all three columns are at least the height
of the browser window (even if their content is shorter), and if
the content of any column is longer than the others and goes
beyond the bottom of the page, I want the shorter columns to
extend accordingly. Like a table would, too.

Well, the result so far is an absolute, complete disaster. I've
managed to create a page that renders differently on four
different browsers, always wrong, and IE isn't even among them.

Look at the page here: http://www.stoptrick.com/new/index.html.

Here is a page with a bit more explanatory text and some
browser screenshots:

http://www.stoptrick.com/csstrouble/index.html

Thanks for any suggestions.

--Daniel

[Philip Ronan]

"Daniel Haude" wrote:

Thanks for any suggestions.

Here are a couple:

1. Search Google for "quirks mode".
2. Ask in a CSS group.

--
phil [dot] ronan @ virgin [dot] net
http://vzone.virgin.net/phil.ronan/

[Andreas Prilop]

On 19 Oct 2005, Daniel Haude wrote:

I thought, why not do it right and use only CSS and DIVs.

Yes, right! Use HTML 4.01 Compact - it has *no* elements but
DIV and SPAN.

scnr

--
Netscape 3.04 does everything I need, and it's utterly reliable.
Why should I switch? Peter T. Daniels in <news:sci.lang>

[Andy Dingley]

On 19 Oct 2005 12:25:26 GMT, Daniel Haude <mu****@yahoo.com> wrote:

if the content of any column is longer than the others and goes
beyond the bottom of the page, I want the shorter columns to
extend accordingly. Like a table would, too.

So use a <table> When you couple the behaviour of these elemetns
together like this, you are implictly defining them to be a related set
of elements - or a table.

Tables aren't bad, it's just that they were mis-used when not necessary.
if you're doing something that really is "table like", then go with the
table.

[Daniel Haude]

On 2005-10-19, Philip Ronan <in*****@invalid.invalid> wrote:

1. Search Google for "quirks mode".
Oh. I see. OK, most of my problems solved. At least the rendering
now agrees with what the book says.
2. Ask in a CSS group.

Good tip, although I think the HTML and CSS groups aren't all
that disjunct. I know that, technically, they have nothing to do
with each other, but they tend to exits in cohabitation...

Thanks,
--Daniel

[Leif K-Brooks]

Andy Dingley wrote:

On 19 Oct 2005 12:25:26 GMT, Daniel Haude <mu****@yahoo.com> wrote:

if the content of any column is longer than the others and goes
beyond the bottom of the page, I want the shorter columns to
extend accordingly. Like a table would, too.

So use a <table> When you couple the behaviour of these elemetns
together like this, you are implictly defining them to be a related set
of elements - or a table.

Presentation does not define semantics. A layout with tabular
presentation is not any more semantically tabular than a layout with
non-tabular presentation. If you want tabular presentation without the
semantics, use display:table and friends.

[Andy Dingley]

On Fri, 21 Oct 2005 00:59:32 GMT, Leif K-Brooks <eu*****@ecritters.biz>
wrote:

Presentation does not define semantics.

No, but binding the behaviour of two columns together like this, when
the behaviour is "match the other column" rather than "both be 80% of
the page height" _is_ coupling two units together in a manner that can
only be described as table-like.

[Leif K-Brooks]

Andy Dingley wrote:

On Fri, 21 Oct 2005 00:59:32 GMT, Leif K-Brooks <eu*****@ecritters.biz>
wrote:

Presentation does not define semantics.

No, but binding the behaviour of two columns together like this, when
the behaviour is "match the other column" rather than "both be 80% of
the page height" _is_ coupling two units together in a manner that can
only be described as table-like.

The two columns are coupled _in_presentation_only_. Equal heights and
semantic connection are unrelated issues.

[Andy Dingley]

On Fri, 21 Oct 2005 13:02:04 GMT, Leif K-Brooks <eu*****@ecritters.biz>
wrote:

The two columns are coupled _in_presentation_only_. Equal heights and
semantic connection are unrelated issues.

So they're coupled, so they're a table. How else are you going to do
this in HTML ?

[Leif K-Brooks]

Andy Dingley wrote:

On Fri, 21 Oct 2005 13:02:04 GMT, Leif K-Brooks <eu*****@ecritters.biz>
wrote:

The two columns are coupled _in_presentation_only_. Equal heights and
semantic connection are unrelated issues.

So they're coupled, so they're a table. How else are you going to do
this in HTML ?

They're coupled _in_presentation_. HTML defines semantics, not
presentation. You use CSS (specifically display:table) for presentation.

[Andy Dingley]

On Fri, 21 Oct 2005 18:35:05 GMT, Leif K-Brooks <eu*****@ecritters.biz>
wrote:

They're coupled _in_presentation_. HTML defines semantics, not
presentation. You use CSS (specifically display:table) for presentation.

Your moralisitic high ground is failing to meet the needs of the user.

How do you do this in CSS then ? Where's the property for
height: just-like-the-one-next-door;

As anyone from a programming (rather than a design) background will
recognise, coupling between modules can be described as a "bad" thing.
However if you don't couple them at all, then your program falls in
half. Equally the absolutist view of "tables are only for telephone
directories" is perhaps desirable, but not attanable in all situations.
This is one of those situations - it may be "presentational" in nature,
but it relies on coupling two things together (the column heights) that
are not coupleable with CSS, but are easily coupled with HTML and
<table>.

[Leif K-Brooks]

Andy Dingley wrote:

On Fri, 21 Oct 2005 18:35:05 GMT, Leif K-Brooks
<eu*****@ecritters.biz> wrote:

They're coupled _in_presentation_. HTML defines semantics, not
presentation. You use CSS (specifically display:table) for
presentation.

How do you do this in CSS then ? Where's the property for height:
just-like-the-one-next-door;

I've mentioned display:table twice now. When are you going to notice?

[Robert Latest]

On Sat, 22 Oct 2005 12:46:46 +0100,
Andy Dingley <di*****@codesmiths.com> wrote
in Msg. <4e********************************@4ax.com>

As anyone from a programming (rather than a design) background will
recognise, coupling between modules can be described as a "bad" thing.
However if you don't couple them at all, then your program falls in
half. Equally the absolutist view of "tables are only for telephone
directories" is perhaps desirable, but not attanable in all situations.
This is one of those situations - it may be "presentational" in nature,
but it relies on coupling two things together (the column heights) that
are not coupleable with CSS, but are easily coupled with HTML and
<table>.

Hi guys,

thanks for fighting this out on my behalf, but I've solved the problem
in a different manner (my 100%-high navbar now resides in an absolutely
fixed DIV on the left).

But back to the academic dispute about equally high columns: Shouldn't
it be possible to put the stuff into two adjacent DIVs inside a
containing DIV. Now position the inside DIVs with relative; top: 0px;
bottom: 0px. Shouldn't the bigger inside DIV then bloat the outside DIV
to the required proportions, forcing the other inside DIV to grow with
it?

Or if we know which inside DIV will grow bigger, we'll let that one be a
float:right one and position the other one relative.

I'm too lazy to try it now.

robert

[kchayka]

Robert Latest wrote:

Shouldn't
it be possible to put the stuff into two adjacent DIVs inside a
containing DIV. Now position the inside DIVs with relative; top: 0px;
bottom: 0px.

Anything is possible, theoretically. In practice, browser support for
bottom positioning is sketchy but is getting better. IE sucks, of course. ;)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.