Re: using CSS instead of tables<[e-mail]><1a0c$48 7284e1$cef88ba3$[e-mail]><VXVck.171777$8k [e-mail]2>

[Chris F.A. Johnson]

On 2008-07-09, Denis McMahon wrote:

Chris F.A. Johnson wrote:

> What effect are you looking for? Something like
<http://cfaj.freeshell.org/testing/xx2.html>, perhaps?

That was useful, I have a similar but not quite the same problem.

Old style markup, set the table width to 100%, set the left column to
200 pixels,

If the left-hand column contains any text, use em rather than
px to size it.

set the right column to 100%, right column is expanded to
take the available space.

How do I do this in CSS?

In CSS, less is more. Most problems are caused by specifying too
much rather than too little. The default width of a block
element is 100%; you don't need to specify it.

Especially when ie has a broken box model?

IE6 and later use the correct box model if you supply the
correct datatype (use HTML 4.01 strict).

I'm wondering about using javascript to set div widths after page load,
but that looks really messy visually as the page loads and then
re-renders itself.

You don't need JavaScript for something this simple.

But it does mean that sniffing the browser and calculating element
widths myself according to viewport dimensions lets me fix the ie box
model issues that affect other parts of the document too.

You don't need browser sniffing, either.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[Denis McMahon]

Chris F.A. Johnson wrote:

On 2008-07-09, Denis McMahon wrote:

>Chris F.A. Johnson wrote:

>> What effect are you looking for? Something like
<http://cfaj.freeshell.org/testing/xx2.html>, perhaps?

That was useful, I have a similar but not quite the same problem.

Old style markup, set the table width to 100%, set the left column to
200 pixels,

If the left-hand column contains any text, use em rather than
px to size it.

>set the right column to 100%, right column is expanded to
take the available space.

How do I do this in CSS?

In CSS, less is more. Most problems are caused by specifying too
much rather than too little. The default width of a block
element is 100%; you don't need to specify it.

OK, here's my old style table:

[logo][ title ]
[menu][content]

Top row is 100 px high, left column is 200 px wide, table width is 100%
of body, so the right column expands to use all the remaining window
width automatically.

My first problem is that I'm unsure whether to create two "column" divs
and put two "row" divs in each "column", or to create two "row" divs
each containing two "column" divs, or just create four separate divs
corresponding to each of the 4 table cells.

Using the "less is more" theory, I define 4 divs:

#logo {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 100px;
background-color: blue;
}
#title {
position: absolute;
top: 0px;
left: 200px;
height: 100px;
background-color: blue;
}
#menu {
position: absolute;
top: 100px;
left: 0px;
width: 200px;
background-color: blue;
}
#content {
position: absolute;
top: 100px;
left: 200px;
background-color: yellow;
}

body {
background-color: blue;
}

With these definitions, the top left corner of each div is now in the
right place, the width of the menu / logo and height of the title / logo
are correct, but the "title" div doesn't expand across the full width of
the "content" div, and the "menu" div doesn't expand to the full length
of the "content" div.

This means, for example, that I can't center a short title in the title
div relative to the content div, because the width of the title div
(containing h1 with text) is determined by the width of the text inside
the h1, if the text is less than enough to wrap the div simply doesn't
expand all the way.

I can "kludge" the background colours issue by setting the body colour
to the same as the menu / logo / title colour if I use the same colours
in those three divs, but I also get a problem on eg my "site map" page
because the site map content is a nested list and the content isn't wide
enough to cause the div to expand to the full width, so the body colour
then appears on the right of the div.

I guess I should restate my problem as one of making the divs expand to
the limits of the container even when their content is minimal (or empty)

Ideas? Suggestions?

Denis

[dorayme]

In article <tp********************@newsfe18.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

OK, here's my old style table:

[logo][ title ]
[menu][content]

Top row is 100 px high, left column is 200 px wide, table width is 100%
of body, so the right column expands to use all the remaining window
width automatically.

My first problem is that I'm unsure whether to create two "column" divs
and put two "row" divs in each "column", or to create two "row" divs
each containing two "column" divs, or just create four separate divs
corresponding to each of the 4 table cells.

Using the "less is more" theory, I define 4 divs:

#logo {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 100px;

You forgot to put in the HTML. Why not supply a url?

--
dorayme

[Andy Dingley]

On 9 Jul, 20:07, "Chris F.A. Johnson" <[e-mail]:

Re: using CSS instead of tables <dd**********************************@k13g2000hse. googlegroups.com<1a*************************@TEKSA VVY.COM<VX********************@newsfe18.ams2>

Fix your broken newsreader...

[Denis McMahon]

dorayme wrote:

In article <tp********************@newsfe18.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

>OK, here's my old style table:

[logo][ title ]
[menu][content]

Top row is 100 px high, left column is 200 px wide, table width is 100%
of body, so the right column expands to use all the remaining window
width automatically.

My first problem is that I'm unsure whether to create two "column" divs
and put two "row" divs in each "column", or to create two "row" divs
each containing two "column" divs, or just create four separate divs
corresponding to each of the 4 table cells.

Using the "less is more" theory, I define 4 divs:

#logo {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 100px;

You forgot to put in the HTML. Why not supply a url?

http://sined.servebeer.com:81/denis/css/

css1.htm with full width text in the "content" div
css2.htm with a list (so partial width) in the "content" div
css3.htm with very little in the "content" div

tab1.htm, tab2.htm and tab3.htm show the layout I want, made with tables

The css is all in css.css

In css1.htm, you can see that the title and menu divs are not
automatically expanding to match the size of the adjacent content div.

css2.htm makes it clear that the only reason the content div in css1.htm
expands to the width of the viewing window is that the text is wider and
wraps.

css3.htm shows that with a really short content, it's possible for title
and menu divs to expand past content in width and height respectively.

note that tab3 shows a problem that doesn't occur in practice, as the
"content" is usually longer than the page length.

Denis McMahon

[dorayme]

In article <Cf*********************@newsfe21.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

dorayme wrote:

You forgot to put in the HTML. Why not supply a url?

http://sined.servebeer.com:81/denis/css/

I am not sure quite what you want, there are so many aspects you refer
to.

Do you want to know how to have a left column with some links, and a
right column taking up the rest of the horiz space. And with a matching
but not so high two cols above to fit, respectively a pic and a title
header without using tables?

Why is the Subject of this thread as absurdly long and cryptic? What is
wrong with simply: Re: using CSS instead of tables?

--
dorayme

[Ben C]

On 2008-07-10, Denis McMahon <de***********@ntlworld.comwrote:
[...]

My first problem is that I'm unsure whether to create two "column" divs
and put two "row" divs in each "column", or to create two "row" divs
each containing two "column" divs, or just create four separate divs
corresponding to each of the 4 table cells.

Using the "less is more" theory, I define 4 divs:

[...]

With these definitions, the top left corner of each div is now in the
right place, the width of the menu / logo and height of the title / logo
are correct, but the "title" div doesn't expand across the full width of
the "content" div, and the "menu" div doesn't expand to the full length
of the "content" div.

This means, for example, that I can't center a short title in the title
div relative to the content div, because the width of the title div
(containing h1 with text) is determined by the width of the text inside
the h1, if the text is less than enough to wrap the div simply doesn't
expand all the way.

[...]

I guess I should restate my problem as one of making the divs expand to
the limits of the container even when their content is minimal (or empty)

Ideas? Suggestions?

You can add to each of the divs "right: 0" and "bottom: 0" as required
to make them stretch to fit their containers.

[Denis McMahon]

dorayme wrote:

In article <Cf*********************@newsfe21.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

>dorayme wrote:

>>You forgot to put in the HTML. Why not supply a url?

http://sined.servebeer.com:81/denis/css/

I am not sure quite what you want, there are so many aspects you refer
to.

http://sined.servebeer.com:81/denis/css/

I want to try and emulate the 4 cell table layout in tab1.htm, tab2.htm
under the above dir in css, but all I can seem to manage is css1.htm,
css2.htm

Basically, with a table, each cell in a row has the same height as all
other cells in the row, and each cell in a column has the same width as
all other cells in the column. Also, setting a table cell width to 100%
makes it use the maximum width that is available in the container of
that cell.

css1.htm demonstrates 2 problems:
#title div not expanding to the full width of the #content div.
#menu div not expanding to full height of #content div

css2.htm demonstrates another problem:
#content div not expanding to right hand edge of window

How do I force a div (or any block display element) to expand itself not
according to the size of its content, but according to the size of its
container?

Do you want to know how to have a left column with some links, and a
right column taking up the rest of the horiz space. And with a matching
but not so high two cols above to fit, respectively a pic and a title
header without using tables?

I want the right columns to take up the rest of the horizontal space,
yes. I also want the lower row to use up all the available vertical space.

Why is the Subject of this thread as absurdly long and cryptic? What is
wrong with simply: Re: using CSS instead of tables?

I have no idea, I didn't start the thread.

Denis McMahon

[Denis McMahon]

Ben C wrote:

>Ideas? Suggestions?

You can add to each of the divs "right: 0" and "bottom: 0" as required
to make them stretch to fit their containers.

OK, tried that, now

http://sined.servebeer.com:81/denis/css/css1.htm

has #content and #menu divs whose background stops at the bottom of the
window, which looks ridiculous when I scroll the page.

Do I need to use a "container" div around the 4 existing divs (#logo,
#title, #menu and #content) to make the container of #content and #menu
expand all the way to the bottom of whichever of them is longer?

Denis McMahon

[Denis McMahon]

Denis McMahon wrote:

Do I need to use a "container" div around the 4 existing divs (#logo,
#title, #menu and #content) to make the container of #content and #menu
expand all the way to the bottom of whichever of them is longer?

Having tried it, I guess the answer is "no"

Denis McMahon

[John Hosking]

dorayme wrote:

>
Why is the Subject of this thread as absurdly long and cryptic? What is
wrong with simply: Re: using CSS instead of tables?

It's a newsreader bug, from which we shouldn't still all be suffering.

A David Schwartz started the thread, but in typical GoogleGroups
drive-by fashion, he merely asked for help once, then ignored a request
(by Chris F.A. Johnson, using slrn/0.9.8.1 (Linux)) for more info. David
hasn't been back since, but the rest of the thread has been about Denis
McMahon's "similar problem". [sig-1]

In his second contribution to the thread, Chris F.A. Johnson used
slrn/0.9.8.1pl2 (Linux), which seems to have a problem with very long
Message-IDs in the References header. His newsreader mangles the header
in that case, so the Subject line gets corrupted by an appended (and
very long) References line.

Chris knows about the problem, but appears unwilling or unable to
permanently fix it. Maybe he's just forgetful, but how could he not notice?

In Thunderbird, BTW, a different Subject line causes a new thread to
appear. Apparently, TB isn't bright enough to use References for
anything more than tree-arrangement within a Subject-grouped thread. I
guess your MT-NewsWatcher is the same way.

--
John
Pondering the value of the UIP: http://improve-usenet.org/
[1] Does it count as thread-hijacking if the original poster is a
drive-by GoogleGrouper?

[Chris F.A. Johnson]

On 2008-07-11, dorayme wrote:
....

Why is the Subject of this thread as absurdly long and cryptic? What is
wrong with simply: Re: using CSS instead of tables?

I unintentionally reverted to a version of slrn that has problems
with certain posts from google groups.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[John Hosking]

Chris F.A. Johnson wrote:

On 2008-07-11, dorayme wrote:
...

>Why is the Subject of this thread as absurdly long and cryptic? What is
wrong with simply: Re: using CSS instead of tables?

I unintentionally reverted to a version of slrn that has problems
with certain posts from google groups.

Well, don't *do* that.
;-)

--
John
Some folks (and fish) have problems with *all* posts from google groups.
The UIP: http://improve-usenet.org/

[dorayme]

In article <k%*********************@newsfe05.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

dorayme wrote:

In article <Cf*********************@newsfe21.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

dorayme wrote:

>You forgot to put in the HTML. Why not supply a url?
http://sined.servebeer.com:81/denis/css/

I am not sure quite what you want, there are so many aspects you refer
to.

http://sined.servebeer.com:81/denis/css/

I want to try and emulate the 4 cell table layout in tab1.htm, tab2.htm
under the above dir in css, but all I can seem to manage is css1.htm,
css2.htm

Lets just do one thing at a time please. First, let me turn off all the
css you have for id="menu" so I can see the structure of the table you
have at /tab1.htm

As I mentioned in a previous question to you, you seem to be wanting 4
blocks, 2 side by side at the top and 2 side by side underneath. There
are lots of ways to skin this cat. I will give you one way and you tell
me just one or two more things you want from it, not more and no more
urls please, I am easily confused.

Here is one way that seems pleasant enough in all my browsers:

<http://dorayme.890m.com/alt/twoBytwo.html>

No, it might not be everything you want, but it maight be an exercise
for you to see how stuff works or along what lines you might think
along. No, it will not be how others tackle this, and probably not the
very simplest or best but it is a shot, take a look and nothing is set
in stone.

--
dorayme

[Denis McMahon]

dorayme wrote:

As I mentioned in a previous question to you, you seem to be wanting 4
blocks, 2 side by side at the top and 2 side by side underneath. There
are lots of ways to skin this cat. I will give you one way and you tell
me just one or two more things you want from it, not more and no more
urls please, I am easily confused.

Here is one way that seems pleasant enough in all my browsers:

<http://dorayme.890m.com/alt/twoBytwo.html>

No, it might not be everything you want, but it maight be an exercise
for you to see how stuff works or along what lines you might think
along. No, it will not be how others tackle this, and probably not the
very simplest or best but it is a shot, take a look and nothing is set
in stone.

OK, the only thing that thios doesn't seem to always do is extend the
bottom of #nav or #content to the bottom of #main

I can fix this when #nav is too short (which is most of the time) by
making the background colour of #main the same as the background colour
of #nav, but that means that on the rare occasions that #content is
shorter than #nav, I end up with a #nav / #main coloured block under the
bottom of #content that I'd prefer was the same colour as #content.

Denis McMahon

[Ben C]

On 2008-07-11, Denis McMahon <de***********@ntlworld.comwrote:

Ben C wrote:

>>Ideas? Suggestions?

You can add to each of the divs "right: 0" and "bottom: 0" as required
to make them stretch to fit their containers.

OK, tried that, now

http://sined.servebeer.com:81/denis/css/css1.htm

has #content and #menu divs whose background stops at the bottom of the
window, which looks ridiculous when I scroll the page.

Do I need to use a "container" div around the 4 existing divs (#logo,
#title, #menu and #content) to make the container of #content and #menu
expand all the way to the bottom of whichever of them is longer?

That's the right sort of idea, but the problem is many of those elements
are absolutely positioned, so won't affect the heights of their
containers at all.

[dorayme]

In article <uY********************@newsfe12.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

dorayme wrote:

As I mentioned in a previous question to you, you seem to be wanting 4
blocks, 2 side by side at the top and 2 side by side underneath. There
are lots of ways to skin this cat. I will give you one way and you tell
me just one or two more things you want from it, not more and no more
urls please, I am easily confused.

Here is one way that seems pleasant enough in all my browsers:

<http://dorayme.890m.com/alt/twoBytwo.html>

No, it might not be everything you want, but it maight be an exercise
for you to see how stuff works or along what lines you might think
along. No, it will not be how others tackle this, and probably not the
very simplest or best but it is a shot, take a look and nothing is set
in stone.

OK, the only thing that thios doesn't seem to always do is extend the
bottom of #nav or #content to the bottom of #main

I'm certain that there are many things this does not do. But let's look
at the thing you mention. Unlike in table columns, yes, this is a
trickier thing to manage and you are right to be wanting things here. In
the UrL above I was simply assuming the content was more than the nav in
length. But let us suppose that you want the same template for both
situations, now the nav taller, now the nav shorter.

Once again, there are different ways to skin this cat. First, notice
that if the text is removed from #content, you get no colour for either
the nav or the content (beyond the white of the background). We could
start to tackle this by first adding overflow: hidden to #main, this has
the effect of making that container grow height to cover its children,
#nav and #content. There are other ways too to do this.

And yes, we can make #main blue and we should also remember that body is
a player in these things and can be used, we could dispense with margins
and padding for the body and let it shine through in various ways to
suit us.

These are the things that make CSS rather fun as well as frustrating.

But instead or in addition, here is something and a bit more to tackle
some of your concerns:

<http://dorayme.890m.com/alt/twoBytwo_faux.html>

I have got rid of body padding and margins and all borders now that you
have seen the way it is constructed from my first URL.

Hint to see how it reacts with nav or content taller: manipulate the
browser window.

--
dorayme

[Denis McMahon]

dorayme wrote:

>>Here is one way that seems pleasant enough in all my browsers:

<http://dorayme.890m.com/alt/twoBytwo.html>

>OK, the only thing that thios doesn't seem to always do is extend the
bottom of #nav or #content to the bottom of #main

I'm certain that there are many things this does not do.

I'm sure you can, for example it doesn't make me breakfast, but I was
referring to the most obvious failing that was visible to me as far as
the effect I'm trying to obtain with CSS.

But instead or in addition, here is something and a bit more to tackle
some of your concerns:

<http://dorayme.890m.com/alt/twoBytwo_faux.html>

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Is there a way to ensure that both #nav and #content will always extend
to the bottom of the viewers screen? The obvious (to me) method is to
use a min-height on both that exceeds the pixel height of any display on
the market, but that seems clumsy and not very future proof.

Denis McMahon

[dorayme]

In article <3M*******************@newsfe30.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

dorayme wrote:

>Here is one way that seems pleasant enough in all my browsers:

<http://dorayme.890m.com/alt/twoBytwo.html>

OK, the only thing that this doesn't seem to always do is extend the
bottom of #nav or #content to the bottom of #main

I'm certain that there are many things this does not do.

... it doesn't make me breakfast, but I was
referring to the most obvious failing that was visible to me as far as
the effect I'm trying to obtain with CSS.

Yes, I know that was your primary concern and I was just saying that
there would be other effects you might understandably want that it does
not do.

You see, in these matters you can settle for a fully worked 'holy grail'
state of the art template without necessarily understanding what quite
is happening. You can get these from the work of clever and industrious
folk who have made their thinking available.

But it is hard for you to learn the ropes with one of these because even
if you study them and sort of see why they are so built at the time of
study, you can easily forget what everything is for later. And then it
will be hard to adapt it if you are not on top of things.

It also takes a lot of the fun out of having a go yourself if you rely
on fancy 'thought of most everything' templates. So I guess what I am
saying to you is, best for now to get something that you do understand
and is simple enough and does the job in hand.

But instead or in addition, here is something and a bit more to tackle
some of your concerns:

<http://dorayme.890m.com/alt/twoBytwo_faux.html>

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

--
dorayme

[Denis McMahon]

dorayme wrote:

>><http://dorayme.890m.com/alt/twoBytwo_faux.html>

>Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

That url has enough content to fill my screen with any browser (I'm
limited to 1024 x 768 here)

However, if I put a single paragraph in the content, with just one word
in it, then the effect becomes apparent.

However, as I said, that's a problem that the table solution also has,
so it's not a great issue.

Something else I have been trying to do, and sort of solved, is to have
a "footer bar" across the bottom of the #content div, with 3 elements, a
left aligned left element, a center aligned center element, and a right
aligned right element.

I say "sort of" because the layout appears to work fine as far as
positioning and alignment is concerned, but I seem to be having a
background colour issue with this that I don't understand. Paragraphs in
div.footer within div.content don't seem to inherit the background of
div.content.

http://sined.servebeer.com/denis/css/footer_test.html

Amaya displays this as I expect it to, firefox 3 has the content
background finishing mid way down the footer para content, and ie 6 has
the content background finishing above the footer content (ie6 is the
latest version I have been able to install under linux with wine).

Incidentally, during this discussion I have also realised that my
thinking was being constrained by my table solution to the original
problem .... there's actually no reason that the #nav division should be
the same width as the logo image.

Denis McMahon

[dorayme]

In article <cc*******************@newsfe30.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

dorayme wrote:

><http://dorayme.890m.com/alt/twoBytwo_faux.html>

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

That url has enough content to fill my screen with any browser (I'm
limited to 1024 x 768 here)

However, if I put a single paragraph in the content, with just one word
in it, then the effect becomes apparent.

Well, I am not seeing such an effect even when the content contains
nothing at all or one word. So it would help to say what browser you are
using. Did you see the browsers I mentioned? Did you see your unwanted
effect in any of them on your machine? Perhaps I am getting a biased
view from my Mac browsers? Are you just going to the URL online or are
you reproducing it somehow on your local machine. If so, make sure you
download the crucial background image (a 1 x 1px purply gif)

However, as I said, that's a problem that the table solution also has,
so it's not a great issue.

An issue does not have to be great for it to be interesting to solve.
Nor is it unreasonable for you to want it. But you need to give details.

>
Something else I have been trying to do, and sort of solved, is to have
a "footer bar" across the bottom of the #content div, with 3 elements, a
left aligned left element, a center aligned center element, and a right
aligned right element.

....

>
http://sined.servebeer.com/denis/css/footer_test.html

....

Your url is showing a Not Found on my machine.

....

Incidentally, during this discussion I have also realised that my
thinking was being constrained by my table solution to the original
problem .... there's actually no reason that the #nav division should be
the same width as the logo image.

The image I put as an example is not the width of the nav column, take a
look. But I simply accepted you had a reason for wanting the space abobe
the nav col to be the same width as the nav column. Perhaps because you
wanted to put caption or other things or for other aesthetic purposes.
You can easily remove the appearance of a separate box top left by
changing the background colour of

#header {
....
background: #fcc;

to

#header {
....
background: #cfc;

at

<http://dorayme.890m.com/alt/twoBytwo_faux.html>

(I am getting the feeling you are looking with IE6? If so, if I have
time tomorrow, I will check with this browser, it is a big pita this
browser! <g>)

--
dorayme

[dorayme]

In article <cc*******************@newsfe30.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

dorayme wrote:

><http://dorayme.890m.com/alt/twoBytwo_faux.html>

Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.

Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

That url has enough content to fill my screen with any browser (I'm
limited to 1024 x 768 here)

However, if I put a single paragraph in the content, with just one word
in it, then the effect becomes apparent.

However, as I said, that's a problem that the table solution also has,
so it's not a great issue.

Something else I have been trying to do, and sort of solved, is to have
a "footer bar" across the bottom of the #content div, with 3 elements, a
left aligned left element, a center aligned center element, and a right
aligned right element.

I modified something I've had around to make a footer as I imagine you
want (with floated list items):

<http://netweaver.com.au/alt/twoBytwo_faux_footer.html>

In Safari, there are no scrollbars vertical when "not needed" as one
would want. But in most other browsers there are and I have not quite
worked out why but I will look again harder!

You don't need to put in the star hack for IE6, you can use a
conditional to deliver a different style sheet for this instruction (I
left all styles in the head for your convenience).

Anyway, this page might be what you want? You can remove the header pic
and put your own in on the left as you want, you can stick text in the
header (in the markup you will see it there but commented out, you can
turn it back on)

--
dorayme

[Denis McMahon]

dorayme wrote:

In article <cc*******************@newsfe30.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

>dorayme wrote:

>>>><http://dorayme.890m.com/alt/twoBytwo_faux.html>
Right, now I'm wondering about another problem that I have that the
table solution doesn't fix. In the 2 by 2 table, if there isn't enough
content to reach the bottom of the screen, I end up with a gap at the
bottom of the table that is filled in the document body or html background.
Well, do you see a gap with the above url (which does not have enough
content to fill many a screen)? Tell me? Maybe there is on some
browsers? I am not seeing any gap on my Firefox, Safari, iCab, MacIE 5,
Opera, Camino.

That url has enough content to fill my screen with any browser (I'm
limited to 1024 x 768 here)

However, if I put a single paragraph in the content, with just one word
in it, then the effect becomes apparent.

However, as I said, that's a problem that the table solution also has,
so it's not a great issue.

Something else I have been trying to do, and sort of solved, is to have
a "footer bar" across the bottom of the #content div, with 3 elements, a
left aligned left element, a center aligned center element, and a right
aligned right element.

I modified something I've had around to make a footer as I imagine you
want (with floated list items):

<http://netweaver.com.au/alt/twoBytwo_faux_footer.html>

In Safari, there are no scrollbars vertical when "not needed" as one
would want. But in most other browsers there are and I have not quite
worked out why but I will look again harder!

You don't need to put in the star hack for IE6, you can use a
conditional to deliver a different style sheet for this instruction (I
left all styles in the head for your convenience).

Anyway, this page might be what you want? You can remove the header pic
and put your own in on the left as you want, you can stick text in the
header (in the markup you will see it there but commented out, you can
turn it back on)

Thanks, it looks ideal. I'm still working my way through the css and
trying to understand the interactions and how it all goes together, but
I think it solves everything.

Thanks again

Denis McMahon (now puzzling over html 4.01, xhtml 1.0 and xhtml 1.1)

[Jonathan N. Little]

Denis McMahon wrote:

Denis McMahon (now puzzling over html 4.01, xhtml 1.0 and xhtml 1.1)

There is nothing to puzzle. If you want IE users on board html 4.01
strict. If you don't know the difference then there is nothing in xhtml
that you need.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[dorayme]

In article <Pl*******************@newsfe10.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

dorayme wrote:

<http://netweaver.com.au/alt/twoBytwo_faux_footer.html>

Thanks, it looks ideal. I'm still working my way through the css and
trying to understand the interactions and how it all goes together, but
I think it solves everything.

Thanks again

Hi Denis, subsequently I posted

<http://netweaver.com.au/alt/twoBytwo_faux_footer2.html>

where there is a way to be rid of pesky vert scrollbars on some browsers
when they are clearly not needed, (a min-height of 99.9% - rather than
100% - on one wrapper). I have still to look at this more closely. (Why
are there not more than 24 hrs in each day? <g>)

I think it is easy to adapt this to have the footer go the whole way
across if you ever want this.

--
dorayme