472,981 Members | 1,536 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,981 software developers and data experts.

2-Column Layout -- Verticle Problem

This problem has got to have a simple solution and I can't be the first
person who has ever handled it. Perhaps Google is no help because I'm
not using the right terms? (I did find one post on-point, but no one
responded to it.)

I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I'm
having this problem whether I use float, absolute or relative positioning.

In the past, I've stumbled on the solution to this problem (and now
can't remember how I did it), or I've just added an empty div at the
bottom of the content div to "pad" the bottom of it so it's long enough.
Lame, I know. And it doesn't work on dynamically generated pages,
only static ones.

Both "content" and "navigation" are within a "container" div, so why
doesn't the "container" div expand to contain both of them, with the
footer tucked neatly under the "container"?

I feel really stupid -- I'm sure I'm missing something basic. But I'm
revisiting this problem again after a year and have no idea where to
start to solve it.

TIA

Aug 31 '05 #1
15 2284
You're right, it's a common problem. The problem lies in the fact that CSS
does not reliably stretch vertically like tables do. That may or may not
change as time goes on with newer browsers and newer versions of CSS. None
the less, everyone who tries to use CSS instead of tables runs into this
pretty quickly.

What you're trying to accomplish is called a 'faux' layout, and with CSS
it's not easy. The only 'reliable' way to do it is to use JS to dynamically
change the height of your DIVs. Unless of course you can work in fixed
heights, but normally that's not an option in this kind of layout.

Of course, you could just go back to a table layout and viola! But I guess
I'm going to hell for suggesting tables in a CSS group. Nevermind the fact
that all your problems would go away if you used a table. It's so funny to
me how CSS people try SOOOO hard to get rid of tables just to say 'look,
haha, I have no tables' when in many cases a simple table or two would have
eliminated 50 lines of CSS and/or JS code.

And before anyone flames me, I'm a big fan of abolishing the tables nested
within tables to like the 10th level - but after trying to avoid tables all
together for layouts for about a year and running into this exact problem to
no end - I'm ok with one or two tables when it allows me to avoid JS or tons
of CSS code.

I have a pretty simply JS solution if you'd like it. It's attached and is 3
files. One HTML with the layout, one CSS with the styles, and on JS with
the script.

The logic behind it is that the DIVs all have no height specified, but the
JS figures out which one of the 3 DIVs are the longest and changes the
height of the other two to that height.

You can adapt it to any number of DIVs without too much trouble. I haven't
tried it on every browser or platform out there because it's my own little
work-around when I just feel the need to be complicated instead of just
using a table. I know it works on IE 6 / WinXP though, but you might want
to vet it with other setups.

Hope that helps.

------------
Shawn Wilson

"Tamblyne" <Ta******@noyahoospam.com> wrote in message
news:11*************@corp.supernews.com...
This problem has got to have a simple solution and I can't be the first
person who has ever handled it. Perhaps Google is no help because I'm
not using the right terms? (I did find one post on-point, but no one
responded to it.)

I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I'm
having this problem whether I use float, absolute or relative positioning.

In the past, I've stumbled on the solution to this problem (and now
can't remember how I did it), or I've just added an empty div at the
bottom of the content div to "pad" the bottom of it so it's long enough.
Lame, I know. And it doesn't work on dynamically generated pages,
only static ones.

Both "content" and "navigation" are within a "container" div, so why
doesn't the "container" div expand to contain both of them, with the
footer tucked neatly under the "container"?

I feel really stupid -- I'm sure I'm missing something basic. But I'm
revisiting this problem again after a year and have no idea where to
start to solve it.

TIA



Aug 31 '05 #2
"Shawn Wilson" <sh****@dvigroup.net> wrote:
You're right, it's a common problem.
There is a posting convention in this group: configure your software to
inject an attribution line on top, snip what you are directly responding
to to a minimum, and put your reply beneath it, thus creating an
interspersed message.
The problem lies in the fact that CSS
does not reliably stretch vertically like tables do. That may or may not
change as time goes on with newer browsers and newer versions of CSS.
No new version of CSS is required for emulating most HTML table layouts,
this is provided for by CSS 2.0 (but not supported by IE).
Of course, you could just go back to a table layout and viola! But I guess
I'm going to hell for suggesting tables in a CSS group.
Using a table for creating a layout has its advantages.
Nevermind the fact that all your problems would go away if you used a table.
Using a table for layout can also create quite a few problems.
I have a pretty simply JS solution if you'd like it. It's attached and is 3
files.


Don't post attachments here, upload it, post the url.

--
Spartanicus
Aug 31 '05 #3
Tamblyne <Ta******@noyahoospam.com> wrote:
I'm sure I'm missing something basic.


So are we, like an url to the problem so that we can see what you are
talking about.

--
Spartanicus
Aug 31 '05 #4
On Wed, 31 Aug 2005 19:10:02 GMT, Shawn Wilson wrote:
You're right, it's a common problem. The problem lies in the fact that CSS
does not reliably stretch vertically like tables do. That may or may not
change as time goes on with newer browsers and newer versions of CSS. None
the less, everyone who tries to use CSS instead of tables runs into this
pretty quickly.

What you're trying to accomplish is called a 'faux' layout, and with CSS
it's not easy. The only 'reliable' way to do it is to use JS to dynamically
change the height of your DIVs. Unless of course you can work in fixed
heights, but normally that's not an option in this kind of layout.

Of course, you could just go back to a table layout and viola! But I guess
I'm going to hell for suggesting tables in a CSS group. Nevermind the fact
that all your problems would go away if you used a table. It's so funny to
me how CSS people try SOOOO hard to get rid of tables just to say 'look,
haha, I have no tables' when in many cases a simple table or two would have
eliminated 50 lines of CSS and/or JS code.

And before anyone flames me, I'm a big fan of abolishing the tables nested
within tables to like the 10th level - but after trying to avoid tables all
together for layouts for about a year and running into this exact problem to
no end - I'm ok with one or two tables when it allows me to avoid JS or tons
of CSS code.

I have a pretty simply JS solution if you'd like it. It's attached and is 3
files. One HTML with the layout, one CSS with the styles, and on JS with
the script.

The logic behind it is that the DIVs all have no height specified, but the
JS figures out which one of the 3 DIVs are the longest and changes the
height of the other two to that height.

You can adapt it to any number of DIVs without too much trouble. I haven't
tried it on every browser or platform out there because it's my own little
work-around when I just feel the need to be complicated instead of just
using a table. I know it works on IE 6 / WinXP though, but you might want
to vet it with other setups.

Hope that helps.

------------
Shawn Wilson

"Tamblyne" <Ta******@noyahoospam.com> wrote in message
news:11*************@corp.supernews.com...
This problem has got to have a simple solution and I can't be the first
person who has ever handled it. Perhaps Google is no help because I'm
not using the right terms? (I did find one post on-point, but no one
responded to it.)

I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I'm
having this problem whether I use float, absolute or relative positioning.

In the past, I've stumbled on the solution to this problem (and now
can't remember how I did it), or I've just added an empty div at the
bottom of the content div to "pad" the bottom of it so it's long enough.
Lame, I know. And it doesn't work on dynamically generated pages,
only static ones.

Both "content" and "navigation" are within a "container" div, so why
doesn't the "container" div expand to contain both of them, with the
footer tucked neatly under the "container"?

I feel really stupid -- I'm sure I'm missing something basic. But I'm
revisiting this problem again after a year and have no idea where to
start to solve it.

TIA


Tamblyne look at my reply to the post "fixed width, 2 column CSS layout
problem" it has the answer to what you want I think, the contents "box" can
be empty and all the other"boxes" stay in position.

Shawn, please do not top post. And Javascript is not the only way to do it.
Aug 31 '05 #5
Rincewind <th***********@hotmail.com> wrote:
Shawn, please do not top post.


Worse than top posting is not snipping, thereby requiring everyone to
scroll down to read one or two added lines.

--
Spartanicus
Aug 31 '05 #6
I'll try to follow better etequite.

Have to ask though, 'top post' ? I replied to the only message I saw, there
were no replies under that message to reply to instead...

----------
Shawn Wilson

"Spartanicus" <in*****@invalid.invalid> wrote in message
news:el********************************@news.spart anicus.utvinternet.ie...
Rincewind <th***********@hotmail.com> wrote:
Shawn, please do not top post.


Worse than top posting is not snipping, thereby requiring everyone to
scroll down to read one or two added lines.

--
Spartanicus

Aug 31 '05 #7
"Shawn Wilson" <sh****@dvigroup.net> wrote in message
news:yG*******************@fe02.news.easynews.com. ..
I'll try to follow better etequite.
I'll try to spell better as well... etiquette - wow...

--------------
Shawn Wilson

"Shawn Wilson" <sh****@dvigroup.net> wrote in message
news:yG*******************@fe02.news.easynews.com. .. I'll try to follow better etequite.

Have to ask though, 'top post' ? I replied to the only message I saw,
there were no replies under that message to reply to instead...

----------
Shawn Wilson

"Spartanicus" <in*****@invalid.invalid> wrote in message
news:el********************************@news.spart anicus.utvinternet.ie...
Rincewind <th***********@hotmail.com> wrote:
Shawn, please do not top post.


Worse than top posting is not snipping, thereby requiring everyone to
scroll down to read one or two added lines.

--
Spartanicus


Aug 31 '05 #8
Shawn Wilson wrote:

Have to ask though, 'top post' ? I replied to the only message I saw, there
were no replies under that message to reply to instead...

"Top posting" is putting your reply first and what you are replying
below it. You top posted. I have bottom posted.
It is a simple mail/newsgroup setting.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Aug 31 '05 #9
"Spartanicus" <in*****@invalid.invalid> wrote:
There is a posting convention in this group: configure your software to
inject an attribution line on top, snip what you are directly responding
to to a minimum, and put your reply beneath it, thus creating an
interspersed message.


If I may ask as well... 'configure your software to inject an attribution
line' I'm assuming you mean the "so and so" wrote: line?

Can this be done with OE automatically?

----------------
Shawn Wilson
Aug 31 '05 #10
On Wed, 31 Aug 2005 19:30:54 GMT, Spartanicus wrote:
Rincewind <th***********@hotmail.com> wrote:
Shawn, please do not top post.


Worse than top posting is not snipping, thereby requiring everyone to
scroll down to read one or two added lines.


Really!
Aug 31 '05 #11
Els
Shawn Wilson wrote:
"Spartanicus" <in*****@invalid.invalid> wrote:
There is a posting convention in this group: configure your software to
inject an attribution line on top, snip what you are directly responding
to to a minimum, and put your reply beneath it, thus creating an
interspersed message.


If I may ask as well... 'configure your software to inject an attribution
line' I'm assuming you mean the "so and so" wrote: line?

Can this be done with OE automatically?


Download OE-Quotefix. It will help to post proper messages, including
attribution lines.
That is, if you wanna do it even better, download a newsreader like
Xnews or Dialog.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Talk Talk - Such A Shame
Aug 31 '05 #12
"Els" <el*********@tiscali.nl> wrote:
Shawn Wilson wrote:
If I may ask as well... 'configure your software to inject an attribution
line' I'm assuming you mean the "so and so" wrote: line?

Can this be done with OE automatically?


Download OE-Quotefix. It will help to post proper messages, including
attribution lines.
That is, if you wanna do it even better, download a newsreader like
Xnews or Dialog.


I roam to various PCs here at work, wouldn't be viable to go installing a
new program everywhere just for this... I'll just learn to do it better
myself.

Is THIS message acceptablly formatted?

------------
Shawn Wilson
Aug 31 '05 #13
Rincewind wrote:
Tamblyne look at my reply to the post "fixed width, 2 column CSS layout
problem" it has the answer to what you want I think, the contents "box" can
be empty and all the other"boxes" stay in position.


Thank you -- I saw the OP, but didn't see your reply. At the outset, it
does look like it will solve my problem.

Thank you for your courtesy. :-)

Aug 31 '05 #14
Els
Shawn Wilson wrote:
"Els" <el*********@tiscali.nl> wrote:
Shawn Wilson wrote:
If I may ask as well... 'configure your software to inject an attribution
line' I'm assuming you mean the "so and so" wrote: line?

Can this be done with OE automatically?
Download OE-Quotefix. It will help to post proper messages, including
attribution lines.
That is, if you wanna do it even better, download a newsreader like
Xnews or Dialog.


I roam to various PCs here at work, wouldn't be viable to go installing a
new program everywhere just for this... I'll just learn to do it better
myself.


Good plan :-)
Is THIS message acceptablly formatted?


Yup, except for one thing, but I think OE can't handle that, IIRC.
It's the sig separator. If you use "-- " (dash dash space) on one
line, the following signature will be snipped automatically by the
newsreaders of people who reply to your message.
IIRC though, OE doesn't see the space at the end.

OE-Quotefix btw, is not a different program, just a sort of plugin for
OE. It doesn't take away any of the normal functionality of OE, just
adds a little.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Yes - Roundabout
Aug 31 '05 #15
rf
Tamblyne wrote:
I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I'm
having this problem whether I use float, absolute or relative positioning.


Add clear: left (or clear: both) to the CSS rule selecting the footer.

Cheers
Richard.
Sep 1 '05 #16

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: thomanjl | last post by:
My current problem I'm having with the verticle scroll bar is actually with the scroll box. I have set the min and max of the scroll bar to -32767 and 32767 respectivly. When I scroll to the end...
5
by: ima | last post by:
I'm attempting to use CSS for a three column layout. My problem is that although I'm using width % ie. column1 width 20%, column2 width 60%, and column3 20%, I end up with a horizontal scroll bar...
10
by: ima | last post by:
I'm attempting to use CSS for a three column layout. My problem is that although I'm using width % ie. column1 width 20%, column2 width 60%, and column3 20% I end up with a horizontal scroll bar...
16
by: Jef Driesen | last post by:
I have created a nice idea for a website and now I would like to translate that idea in (x)html and css. The layout is quite basic: a header, two columns and a footer. For a graphical presentation,...
1
by: phej | last post by:
I have an annoying table problem within my table-less layout. You can see the sample html here: http://icdl.com/staging/2column.shtml. In Firefox, Safari, IE 7 and Opera this page renders fine,...
5
by: fructose | last post by:
This is driving me crazy... I've spent, literally, a week trying to solve this (probably very silly) problem to no avail. Help please! The code below shows the PHP with the relevant CSS for...
1
by: jonhrs | last post by:
Hi, I have an intranet page which will be used by IE users only, primarily IE6 users. The problem is with the two column layout I have is that if there's a wide element in the main content of...
2
by: BT | last post by:
I inherited a website to maintain and there is a minor spacing glitch that shows up in IE v6, but not in FireFox v1.5. The website is www.crhschoir.org and the problem is with the second row of...
1
by: cozsmin | last post by:
hello, my program is a simple banking application, i need it for my resumee, but i have a little problem i got stuck trying to maek some TextField -s visible , it seems that setting the layout (...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
4
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.