footer & 3 col absolute layout

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

sonya11@excite.it - 29 Nov 2005 12:12 GMT

hi all,

sorry I realize the topic is well known, anyway is there a way without
using javascript to have a footer always under a 3 column layout with
Absolute Positioning ?

I don' t want to use float 'cause I want to organize content in a
better order for accessibility
and search engine optimization ( content first ) and I cannot know in
advance the height of the central column 'cause the content is taken
from a database and so the central column could be shorter than the two
absolute-positioned on the side.

All tutorials I found say there is no way without using a bit of
javascript but this could be blocked by users, so any solution ?

TIA

sonya :)

Reply to this Message

Spartanicus - 29 Nov 2005 12:42 GMT

>sorry I realize the topic is well known, anyway is there a way without
>using javascript to have a footer always under a 3 column layout with
[quoted text clipped - 6 lines]
>from a database and so the central column could be shorter than the two
>absolute-positioned on the side.

Only at the bottom of the viewport and with a footer with a specified
height. If there isn't enough main content to reach the footer you will
have a gap.

IE CSS support may also be a problem.

Signature

Spartanicus

Reply to this Message

CT - 29 Nov 2005 16:06 GMT

> hi all,
>
[quoted text clipped - 15 lines]
>
> sonya :)

Is this (work in progress) page similar to what you are looking for?
http://speakenglish.noswad.me.uk

It has a hidden div in the center content, which is the length of the
side content (got the idea after seeing a message from Spartanicus
regarding 3 equally spaced images)

AD

Reply to this Message

Pawel Knapik - 29 Nov 2005 19:13 GMT

sonya11@excite.it napisał(a):

> hi all,
>
[quoted text clipped - 5 lines]
> better order for accessibility
> and search engine optimization ( content first )

I know it isn't the answer for your question, but it may be
a solution for your problem. If one additional <div> won't
make you feel bad you can create layout with content first
using floats:

<body>
<div id="wrapper">
    <div id="content">
    content here.
    </div>

    <div id="sidebarOne">
    sidebar one.
    </div>
</div>

<div id="sidebarTwo">
sidebar 2
</div>
<div id="footer"> footer </div>
</body>

CSS for sidebar1 | content | sidebar2:
#content { float:right; width: 66%; }
#sidebarOne { float:left; width: 33%; }
#sidebarTwo { float: right; width:33%; }
#wrapper { float:left; width:66%; }
#footer { clear:both; }

CSS for sidebar2 | content | sidebar1:
#content { float:left; width: 66%; }
#sidebarOne { float:right; width: 33%; }
#sidebarTwo { float: left; width:33%; }
#wrapper { float:right; width:66%; }
#footer { clear:both; }

You can make easily:
    sb2 | sb1 | content
and
    content | sb1 | sb2

You'd need reorder the code (or use absolute values) to
create sb1 | sb2 | content or content | sb2 | sb1.

Reply to this Message

Robert Frost-Bridges - 29 Nov 2005 20:40 GMT

> hi all,
>
[quoted text clipped - 11 lines]
> All tutorials I found say there is no way without using a bit of
> javascript but this could be blocked by users, so any solution ?

There is this: http://positioniseverything.net/articles/onetruelayout/

which includes any order/full height columns using CSS although I'm not sure
how robust it is.

Signature

Robert
http://brightonfixedodds.net

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2005

footer & 3 col absolute layout