473,837 Members | 1,531 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Footer to extend across page width

Greetings.

I have a two-column web layout, where the first column is just the regular
body text with a "marign-right" of 16em, and the second column is an
"absolute"-positioned div with a width of 16em.

I would like to have a footer extending across the entire width of the page,
at the very bottom of the page (i.e., after both columns end). How can I
do this? There is no way of knowing in advance which of the two columns
will be longer.

If I use "absolute" positioning and specify a "bottom" of 0, I get the
footer positioned at the bottom of the window, and it scrolls up with the
rest of the page when I scroll down to the end of the columns. Setting
"clear: both" doesn't seem to have any effect either. I don't want to use
"fixed" positioning because it's broken in MSIE, and don't want the footer
to scroll along with the page anyway. I just want it waiting there at the
end.

Here's a link to the HTML and CSS itself, followed by some relevant snippets
from the CSS file:

http://www.dfki.uni-kl.de/~miller/
http://www.dfki.uni-kl.de/~miller/dfki_css.css

body {
margin-right: 16em;
}

#sidebar {
position: absolute;
top: 90px;
right: 1.1em;
width: 16em;
padding-right: 0;
padding-bottom: 0;
}

#footer {
/* what goes here?? */
}

Any help would be greatly appreciated.

Regards,
Tristan

--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you
Jul 20 '05 #1
2 4482
Tristan Miller wrote:

[http://www.dfki.uni-kl.de/~miller/]
...
I have a two-column web layout, where the first column is just the
regular body text with a "marign-right" of 16em, and the second
column is an "absolute"-positioned div with a width of 16em.
Have you considered floating the second column instead?
I would like to have a footer extending across the entire width of
the page, at the very bottom of the page (i.e., after both columns
end). How can I do this? There is no way of knowing in advance
which of the two columns will be longer.


clear:both is a popular method - pehaps it will work in your circumstances.

--
William Tasso - http://WilliamTasso.com
Jul 20 '05 #2

"Tristan Miller" <ps********@not hingisreal.com> wrote in message
news:14******** ********@ID-187157.news.dfn cis.de...
Greetings.

I have a two-column web layout, where the first column is just the regular
body text with a "marign-right" of 16em, and the second column is an
"absolute"-positioned div with a width of 16em.

I would like to have a footer extending across the entire width of the page, at the very bottom of the page (i.e., after both columns end). How can I
do this? There is no way of knowing in advance which of the two columns
will be longer.

If I use "absolute" positioning and specify a "bottom" of 0, I get the
footer positioned at the bottom of the window, and it scrolls up with the
rest of the page when I scroll down to the end of the columns. Setting
"clear: both" doesn't seem to have any effect either. I don't want to use
"fixed" positioning because it's broken in MSIE, and don't want the footer
to scroll along with the page anyway. I just want it waiting there at the
end.

Here's a link to the HTML and CSS itself, followed by some relevant snippets from the CSS file:

http://www.dfki.uni-kl.de/~miller/
http://www.dfki.uni-kl.de/~miller/dfki_css.css

body {
margin-right: 16em;
}

#sidebar {
position: absolute;
top: 90px;
right: 1.1em;
width: 16em;
padding-right: 0;
padding-bottom: 0;
}

#footer {
/* what goes here?? */
}

The typical solution:

#header {
position: absolute;
top: 0;
left: 0;
}

#text {
float: left;
margin-top: (whatever clears the header);
width: (either a % or the actual size);
}

#sidebar {
float: right;
margin-top: (whatever clears the header);
width: (either a % or the actual size);
}

#footer {
clear: both;
}

If you move your header div to the top of the code, you can avoid having to
set a top margin on the floats, and they'll automatically line up OK. Just
eliminate the absolute positioning on it and those puppies will float fine.
In any case, your footer div should be at the end of the code as it is.
Jul 20 '05 #3

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

Similar topics

1
2985
by: Will Buntin | last post by:
I am trying to design my site without tables, using CSS for positioning and am having limited success. My main issue is I have a three column layout and my footer needs to run across the page, after the longest content from any column has finished. I've found a few examples and I thought I had mine set up correctly, but obviously something is wrong. So if there is any CSS expert out there willing to give me some tips... The page is...
11
8335
by: Peter Wu | last post by:
Hello, I want to create a Header and Footer for every ASPX page I build. I created 2 Web user controls respectively and placed them in an ASPX page. The problem is that I cannot position the Footer to be always at the bottom of the page. The Header and Footer are always together at the top of the page. Was I missing anything? Thanks!
1
1675
by: Stu | last post by:
Hi, I have a button in the footer of a datagrid that sometimes does not tigger the item command. The page is quite large & has a number of homegrown controls in it. Has anyone come across this type of behaviour before? Can anyone suggest a solution? Thanks in advance, Stu
7
2626
by: Andrew | last post by:
I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work, primarily due to the footer not being aware of the columns due to me floating / positioning them. I have the following (very simple) markup: <div id="head">...</div> <div id="left">...</div>
16
1517
by: Edward | last post by:
This is a three-column DIV page with a menu bar DIV under them. Easy enough with table layouting but with CSS I can't get it to work: http://tanguay.info/web/examples/threeColumnsColor.htm 1. In both Firefox and Explorer the background colors in the left and right columns don't extend down to the bottom. 2. And in Explorer (6), the color of the footer bar bleeds up into the left and right columns UNTIL you resize the window, and then...
13
2402
Death Slaught
by: Death Slaught | last post by:
I have my entire page in my "main" div. div.main { width: 100%; height: 100%; border: 1px solid gray; } on the left of the page I have a banner.
3
2078
by: rassklass | last post by:
HI all, I have designed a site found at www.pickupnewspapers.co.uk/nottinghamshire/index.html but I cant get the footer to sit stil on the page. It is because of the javascript ticker, everytime the ticker types the footer jumps up and down. Also the ticker does not work in firefox but does in IE7 (cant test in any others as dont have a computer with it on) . I am quite amateur to html and no nothing about javascript. I am aware there are...
11
2439
by: Michael7 | last post by:
Hi everyone, Me again, been a while since I've been here, but I'm back again needing help with a simple thing. I've searched for help on creating a footer, but all the help I've found, was absolutely nothing like what I was looking for. Could anyone help me with the very simple issue of creating a footer? I'm trying to create it on my index page (and all of the others, once I figure out HOW :) ) Here is the page:
1
2087
by: donpro | last post by:
Hi, I'm creating a template paging sing pure CSS and all looks good except the footer which I am having problems with. 1) When I space out each of the FOUR DIVS at 25%, it wraps in IE. I hacked it by changing to 24% but don;t know why. 2) I can't get the right border to extend down to the bottom border (both IE and Firefox).
0
9682
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10870
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10621
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10267
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7804
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5668
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5845
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4474
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4038
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.