Stylesheets - 2 Column layout w. footer...

Author

2 Column layout w. footer...

Stian Lund

2004-06-25, 7:15 am

Hi,
I'm trying to create a 2 column layout with a footer on the bottom, where
the (fixed-width) sidebar follows the content in the code, while showing
on the left hand side of the content.

The footer must stay at the bottom regardless of which column is the
longest, so absolute positioning is out, I need to use floats with the
clear: both; - property on the footer.

Doing this with the sidebar *before* the content in the code I know how
to do, no worries, but the other way around seems to be much harder.
There doesn't seem to be many other pages doing this, so I'm guessing
this might be near to 'impossible' to do in a dynamic way?

I found a pretty good starting point here:
http://www.ryanbrill.com/floats.htm

The sidebar is on the right hand side, so I have been trying to hack this
over to the left. Also, I need to be able to add padding and margins, and
if I mess with this, the result is often that the columns are pushed
down. I guess I need to think differently to do this... anyway, here's
what I've come up with for now:

http://stian.freeshell.org/test/test3.html

This does not scale well however, especially in Opera 7.51 (bug?), where
if you resize the page, the content seems to be fixed width. It scales ok
in MSIE and Mozilla, but I'd like it to work in Opera the most.

Anyway, any pointers or tips on how to do this? Any help appreciated, I'm
sure you CSS gurus can think of some way to do this :)

regards,
Stian
--

Harlan Messinger

2004-06-25, 12:15 pm

Stian Lund <stian.REMOVE.lund@operamail.com> wrote:

>Hi,
>I'm trying to create a 2 column layout with a footer on the bottom, where
>the (fixed-width) sidebar follows the content in the code, while showing
>on the left hand side of the content.
>
>The footer must stay at the bottom regardless of which column is the
>longest, so absolute positioning is out, I need to use floats with the
>clear: both; - property on the footer.
>
>Doing this with the sidebar *before* the content in the code I know how
>to do, no worries, but the other way around seems to be much harder.
>There doesn't seem to be many other pages doing this, so I'm guessing
>this might be near to 'impossible' to do in a dynamic way?

I just happened to read this last night:

http://alistapart.com/articles/negativemargins/

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Rijk van Geijtenbeek

2004-06-25, 12:15 pm

On 25 Jun 2004 09:40:57 GMT, Stian Lund <stian.REMOVE.lund@operamail.com>
wrote:

> Hi,
> I'm trying to create a 2 column layout with a footer on the bottom, where
> the (fixed-width) sidebar follows the content in the code, while showing
> on the left hand side of the content.
...
> http://stian.freeshell.org/test/test3.html
>
> This does not scale well however, especially in Opera 7.51 (bug?), where
> if you resize the page, the content seems to be fixed width. It scales ok
> in MSIE and Mozilla, but I'd like it to work in Opera the most.

You've hit a known problem in Opera, changing the body width doesn't cause
a recalculation of widths of floated elements. Or something like that at
least.

> Anyway, any pointers or tips on how to do this? Any help appreciated, I'm
> sure you CSS gurus can think of some way to do this :)

I don't think there is a simple CSS solution for this, maybe some
javascript could help. But you could also ignore the case of changing
window sizes.

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

Stian Lund

2004-06-25, 12:15 pm

Harlan Messinger <hmessinger.removethis@comcast.net> wrote in
news:kg0od09rdo918ebnchjfj8u5q4ib8ofdf3@4ax.com:
> I just happened to read this last night:
> http://alistapart.com/articles/negativemargins/

That's a *great* article, and actually written by the same Ryan Brill who
created the example I'm working from. :)

But the examples used still have the sidebar on the right hand side, so I
don't get any farther...

However, I am actually getting somewhere now, so I've managed to get it
pretty dynamic with the menu on the left side, it wasn't as hard as I
first thought, so here is the situation:
http://stian.freeshell.org/test/test4.html

I've added some borders in colour to see what I'm doing, and I wrapped
the content and sidebar in another DIV to have more control of the
margins of the main elements.

So, It's setting somewhere - but I could still use some help with ways of
doing this the 'right' way...

cheers,
Stian
--

Harlan Messinger

2004-06-25, 12:15 pm

"Stian Lund" <stian.REMOVE.lund@operamail.com> wrote in message
news:Xns9513A46E74BC7stianus@130.133.1.4...
> Harlan Messinger <hmessinger.removethis@comcast.net> wrote in
> news:kg0od09rdo918ebnchjfj8u5q4ib8ofdf3@4ax.com:
>
> That's a *great* article, and actually written by the same Ryan Brill who
> created the example I'm working from. :)
>
> But the examples used still have the sidebar on the right hand side, so I
> don't get any farther...

Check closely. There's a place in the article where he tells you what to
change if you want the sidebar on the left.

>
> However, I am actually getting somewhere now, so I've managed to get it
> pretty dynamic with the menu on the left side, it wasn't as hard as I
> first thought, so here is the situation:
> http://stian.freeshell.org/test/test4.html
>
> I've added some borders in colour to see what I'm doing, and I wrapped
> the content and sidebar in another DIV to have more control of the
> margins of the main elements.
>
> So, It's setting somewhere - but I could still use some help with ways of
> doing this the 'right' way...
>
> cheers,
> Stian
> --
>