Two column liquid fixed right, equal length columns, with footer

[Eric Lindsay]

I hope someone can help, before I start thinking tables have a lot of
merit after all.

I am trying to achieve a two column layout, with source code div order
main content, right side navigation, footer. Naturally I want liquid
main contents, and I have float: right; img, and clear: both; paragraphs
in the main contents div.

Fixed width right navigation column is probably essential. There is a
confounded logo graphic to go at the top right of the viewpoint, and I
need to match the colour the whole way down the right hand column.

But I also need a full width but limited height footer directly below
the longest column (either column may be longer). So the background
colour continues after the footer.

So far I've totally failed to get close. If I use a background image on
body with repeat-y it makes the nav column look as if it continues the
whole way down, but the image continues past the footer (not wanted).

If I position the right side navigation where I need it using position:
absolute; the clear: both; footer doesn't clear it (nav out of flow, I
guess).

However if I float the navigation right, it gets stuck directly below
the main contents. I'm obviously missing something fundamental.
especially as to why I can't persuade float right to work.

Apart from Googling, I have checked most of the layouts pointed to by
http://css-discuss.incutio.com/?page=TwoColumnLayouts and a chunk of
http://css-discuss.incutio.com/?page=ThreeColumnLayouts Tried so many
experiments I am not even sure where I started.

Does anyone have a favourite tutorial they think addresses my problem?
Thanks.

--

http://www.ericlindsay.com

[dorayme]

Re: Two column liquid fixed right, equal length columns, with footer

In article
<NOwebmasterSPA M-A8FFA8.18494923 122006@freenews .iinet.net.au>,
Eric Lindsay <NOwebmasterSPA M@ericlindsay.c omwrote:

However if I float the navigation right, it gets stuck directly below
the main contents. I'm obviously missing something fundamental.
especially as to why I can't persuade float right to work.

You best provide a url of your attempts so far for something to
go on. But if this helps:

You are floating right and specifying a width? Are you ensuring
you give the content div a right margin of at least that
particular width (for the float to "sit in")? Where are you
putting the floated div html? Before or after the content one...
remember that a float acts as an inline object, like a word and
it is important what it is inline with. Put up your attempt and
we can take a look and suggest a reordering or a container to
hold things together (in case there is unwanted float drop)

--
dorayme

[Eric Lindsay]

Re: Two column liquid fixed right, equal length columns, with footer

In article
<doraymeRidTh is-9BC7D5.20321723 122006@news-vip.optusnet.co m.au>,
dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article
<NOwebmasterSPA M-A8FFA8.18494923 122006@freenews .iinet.net.au>,
Eric Lindsay <NOwebmasterSPA M@ericlindsay.c omwrote:
>

However if I float the navigation right, it gets stuck directly below
the main contents. I'm obviously missing something fundamental.
especially as to why I can't persuade float right to work.

>
You best provide a url of your attempts so far for something to
go on. But if this helps:

You are floating right and specifying a width?

Yes, 200px to match the logo illustration

Are you ensuring
you give the content div a right margin of at least that
particular width (for the float to "sit in")?

Yes, I had used 250px. However I had been swapping between large margins
and float left all day, so things were getting messy, and I am tired
enough now not to recall exactly what I tried. Since I only really seem
to do CSS when Xmas approaches, I don't have the best memory for what I
tried in previous years on web sites.

Where are you
putting the floated div html? Before or after the content one...
remember that a float acts as an inline object, like a word and
it is important what it is inline with.

Floated right div is after the content div. Normally I don't have a
logo, so my H1 was prior to the main content. I think having that affect
the float was annoying me, so I pulled the h1 inside the main content.

Put up your attempt and
we can take a look and suggest a reordering or a container to
hold things together (in case there is unwanted float drop)

I think I'll get some sleep, and in the morning make a few changes and
put up a few test cases as you suggest. I have some antique pages from
years ago that should be a (mostly) functional equivalent, so I should
be able to figure out what I did then that I can't see now. The course
of least harm seems to be to let a background gif on the body do a
repeat-y the whole way down the viewpoint, and then figure how to knock
it out at the bottom of the page. Thanks.

--

http://www.ericlindsay.com