|
 |
|
|
|
| Thread title: CSS footer with liquid layout |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
10-10-2005, 09:57 PM
|
#1
|
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 460
|
 CSS footer with liquid layout
I've been at this all day.
Since my 3 column layout is liquid (ie. expands to the full width of the browser), I used Absolute positioning for each column. Now I have no idea how to position the footer. Usually, I place the footer using the Margin-top property to keep it at a distance from the columns, but this time the columns are positioned using the Absolute method.
This sounds confusing, does anyone even understand what I'm talking about? 
Edited: Here's the link to the page on which i am trying to place a footer: http://www.singhselectronicworld.com/index2.html
Here's the .css file: http://www.singhselectronicworld.com/styles/css1.css
I'm trying to place a footer on that page, that's all.
|
|
|
|
10-10-2005, 10:18 PM
|
#2
|
Status: Member
Join date: Jul 2005
Location: Massachusetts, US
Expertise:
Software:
Posts: 428
|
I do, you don't know how you are going to put the footer in, because the other columns would run right through it. Your solution, make the 3 columns in 1 div, and then close the div, after put your footer. May work.
|
|
|
|
10-10-2005, 11:03 PM
|
#3
|
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 460
|
If i make all the three columns in 1 div, then that means i need to have them by Relative positioning. But somehow, i am not successful at that.
|
|
|
|
10-10-2005, 11:12 PM
|
#4
|
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
Posts: 3,820
|
There is a solution (just CSS) which means that so long as your right-column was never the longest of the 3, a footer could be added. Or, if you play around with the HTML (put the right container above the center one) then I can help you fix things.
Cheers,
Salathe
|
|
|
|
10-11-2005, 04:39 AM
|
#5
|
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 460
|
Isn't there a website which offers a solution to this? Or maybe a tutorial on how to do 3 column fluid layouts with footer? This seems to be a common problem, right?
|
|
|
|
10-11-2005, 06:39 AM
|
#6
|
Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:
Posts: 5,572
|
|
|
|
|
10-11-2005, 12:58 PM
|
#7
|
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 460
|
Thanks Julian and everyone else.
That tutorial seems confusing, and is very long. I'll read it, but for now i'll use the tables for the 3 columns, like i always do. :S
Thanks again!
|
|
|
|
10-11-2005, 03:47 PM
|
#8
|
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
Posts: 2,246
|
Code:
#container {
float: left;
width: 100%;
}
#left {
float: left;
width: 20%;
margin: 0 2%;
}
#mid {
float: left;
width: 54%;
margin: 0 2%;
}
#right {
float: left;
width: 20%;
margin: 0 2%;
}
#footer {
clear: left;
width: 100%;
}
container
--left
--middle
--right
footer
works every time
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed