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 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
"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
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
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.
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
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
"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
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)
"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
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!
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
"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
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. :-)
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
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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...
|
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...
|
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...
|
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,...
|
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,...
|
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...
|
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...
|
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...
|
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 (...
|
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=()=>{
|
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...
|
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...
|
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...
|
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...
|
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 :...
|
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...
|
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...
|
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...
| |