I'd like to make a web page with a column down the left side - top to
bottom. A header to the right of the left column with two columns
below it, right and center.

Like this:

LL HHHHHHHH
LL CCCCC RR
LL CCCCC RR
LL CCCCC RR
LL CCCCC RR
LL CCCCC RR
LL CCCCC RR

I can do this with tables but I would like to use CSS and divs. My
knowledge of CSS is limited and I can't seem to get it to work, nor can
I find an example on the internet.

Fleeing from the madness of the . jungle
F.C. James <EMAIL REMOVED> stumbled into
news:alt.www.webmaster
and said:

>
> I'd like to make a web page with a column down the left side - top to
> bottom. A header to the right of the left column with two columns
> below it, right and center.
>
> Like this:
>
> LL HHHHHHHH
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
>
> I can do this with tables but I would like to use CSS and divs. My
> knowledge of CSS is limited and I can't seem to get it to work, nor can
> I find an example on the internet.

OTTOMH (Starter for 10) see how you get on with this

#LL {float:left; width:8em;}
#HH {}
#RR {float:right; width:8em;}
#CC {}

#HH & #CC may need a float
- depending on other stuff on your page

--
William T***o

http://williamt***o.com/words/what-is-usenet.asp

F.C. James wrote:

> I'd like to make a web page with a column down the left side - top to
> bottom.

> Like this:
>
> LL HHHHHHHH
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR

> I can do this with tables but I would like to use CSS and divs.

Is this acceptable?

LL HHHHHHHH
LL CCCCC RR
LL CCCCC RR
LL CCCCC RR
LL CCCCC RR
CCCCC
CCCCC

If so, then do it with <div> and CSS float. Read a good 3-column
tutorial (e.g. glish.com or brainjar.com) for the background and the
gotchas, including the need to set widths on floated things, when you
need to use clear after floats etc.

If this isn't acceptable and you really must use the first one (with
the full-height sidebars) then I'd either think again (I bet it's not
that important to keep the sidebar full-height) or I'd do it with two
nested tables.

You could do it with CSS, but you'd need to manage explicit heights on
the sidebars and that's more of an abomination than using <table>. The
problem is that you're asking the layout to maintain the same height on
two unrelated things. You can do this in CSS either by setting the
heights explicitly (bad practice for a fluid design with an unknown
content height) or by setting their rendering mode to be "grid-like"
(and thus making them related). In HTML, the grid-like entity is the
<table>

CSS does have table-like display modes for non-<table> elements, but
these were originally intended for XML use, not HTML. As a result,
they're not widely implemented as settable properties -- you can access
them, but only (reliably) by using the HTML <table> element.

On 2006-12-20 07:34:32 -0500, "William T***o" <EMAIL REMOVED> said:

> #HH & #CC may need a float
> - depending on other stuff on your page

might need a right margin on the #CC

Other than that the top of your head did well!


--
Thyme Online Ltd
Caribbean Web Design
http://www.thymeonline.com/

Andy Dingley wrote:

>
> Is this acceptable?

That would be fine.

> LL HHHHHHHH
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
> LL CCCCC RR
> CCCCC
> CCCCC
>
> If so, then do it with <div> and CSS float. Read a good 3-column
> tutorial (e.g. glish.com or brainjar.com) for the background and the
> gotchas, including the need to set widths on floated things, when you
> need to use clear after floats etc.
>
> If this isn't acceptable and you really must use the first one (with
> the full-height sidebars) then I'd either think again (I bet it's not
> that important to keep the sidebar full-height) or I'd do it with two
> nested tables.
>
> You could do it with CSS, but you'd need to manage explicit heights on
> the sidebars and that's more of an abomination than using <table>. The
> problem is that you're asking the layout to maintain the same height on
> two unrelated things. You can do this in CSS either by setting the
> heights explicitly (bad practice for a fluid design with an unknown
> content height) or by setting their rendering mode to be "grid-like"
> (and thus making them related). In HTML, the grid-like entity is the
> <table>
>
> CSS does have table-like display modes for non-<table> elements, but
> these were originally intended for XML use, not HTML. As a result,
> they're not widely implemented as settable properties -- you can access
> them, but only (reliably) by using the HTML <table> element.
>

Thanks, I'll read glish and see if I can glean a solution to my problem.

Here is the layout I would like. But by using divs instead of colspan
and rowspan.

http://www.anzwers.org/trade/nicksnotes/

I have borrowed a 3 column from glish. In the header is a link to it.
I can't seem to make the leff column work.

F.C. James wrote:
>
> Here is the layout I would like. But by using divs instead of
[tables for layout.]

>
> http://www.anzwers.org/trade/nicksnotes/
>
> I have borrowed a 3 column from glish. In the header is a link to it.
> I can't seem to make the leff column work.
>

Saw your page at http://www.anzwers.org/trade/nicksnotes/holygrail.html.

Don't know what you want to do with your all.css; all it contains is
"<HTML><HEAD></HEAD><BODY></BODY></HTML>", which won't be too useful.

Your embedded CSS is also impure. See the stray "background" at the end
of #leftcontent. You also have some instances of
voice-family: "\"}\"";voice-family: inherit; which I see you've copied
in from Glish. I suppose it must be some kind of hack, but I haven't
bothered to read why it's there. I'd guess you don't need it though.
And you only need one height in #banner.

Anyway, here're a few real changes you might try:

#leftcontent {top:120px;}
#rightcontent {top:160px;}
#banner {margin-left:200px;}

(These are just the values to replace or add; I don't mean to throw out
all the other stuff, except for the errors I mentioned.) I'm hoping
you'll be able to derive the reasons for these changes. If not, ask.

Now, if this works for you, you still ought to think about what happens
at other font sizes or viewport dimensions. You're sizing blocks in
pixels, which often means trouble. Look how tight your banner content is
already.

HTH. GL.
--
John