Positioning at the bottom of content not screen 1

dunxd · Jul 29, 2002

I am trying to position a layer at the bottom of a web page for copyright information etc. It is proving rather difficult to get this to work.

Using the position:absolute in IE6 or Mozilla with a bottom:0px appears to fix a layer to the bottom of the browser screen rather than the page.

How can I get a layer to appear as the last thing on the page (after all the main content, however long it is)? I am sure this must be possible using CSS.

starway · Jul 29, 2002

There's no universal answer - it depends on how you create the page layout. It's impossible to answer without seeing your code.

In general, it is sufficient just to place another block element right after the main content (in case you use CSS positioning and you do it right).

<body>
<p class=header>
page header
</p>
<p class=main>
main content
</p>
<p class=footer>
page footer
</p>
</body>

dunxd · Jul 29, 2002

Here is an example of what I am trying to do:
HTML in body tag:

Code:

<div id=&quot;header&quot;>Header</div>
<div id=&quot;col1&quot;>Col1</div>
<div id=&quot;col2&quot;>Col2</div>
<div id=&quot;col3&quot;>Col3</div>
<div id=&quot;footer&quot;>Footer</div>

And the CSS:

Code:

#header {
	width: 100%;
	border: thin solid black;
}
#col1 {
	background-color: red;
	width: 25%;
	left: 0%;
	position: relative;
}
#col2 {
	background-color: blue;
	left: 238px;
	position: relative;
	width: 25%;
	top: 35px;
}
#col3 {
	background-color: Green;
	position: relative;
	left: 66%;
	width: 25%;
}
#footer {
	width: 100%;
	border: thin solid black;
}

The result I want is a page with the header at the top, three columns that can have any amount of content in them, and a footer which always appears underneath the columns.

It doesn't work properly as I have put it above. I have tried experimenting with relative and static positioning, but not getting anywhere. Would float help?

I know I could do this with tables, but I am determined to get it with CSS!

Dunx

starway · Jul 29, 2002

Sorry I can't work on your problem rigth now. Yes, [tt]float[/tt] property will definitely help (if you talk about 3 colomns of main part).
My small suggestion is to keep all cols inside one block element, like this:

<div id="header">Header</div>
<div class=main>
<div id="col1">Col1</div>
<div id="col2">Col2</div>
<div id="col3">Col3</div>
</div>
<div id="footer">Footer</div>

This will help you to keep the solid page structure, no matter what changes in 'main' part can occur.

dunxd · Jul 29, 2002

Thanks a lot.

I have tried that out and seem to have it working. I created the "main" div for the three cols, and set header, footer and main position:static.

Then I experimented with setting the columns to different position types testing in IE6.
I thought that setting all the columns positioning to absolute would work, but when they are all absolute the footer moves to right underneath the header (ie obscured by the cols).
But if I set col3 to relative it seems to work in both IE6 and Mozilla. Not sure that I understand why though...

Thanks for your help starway, that container div is just what I was needing!

Dunx

Jimuniguy · Jul 29, 2002

Hi,

Its exactley the save problem I had and the same way I fixed it all, just inclose it all in one big <div> then put the footer at the end.

My problem is that i need thoose 3 columns to be dynamically adjustable, not static :-(

Cheers

James

starway · Jul 30, 2002

dunxd: I strongly NOT recommend to use [tt]position:static[/tt] as there are many problems with browser support of this property. It's ok in IE6, but IE5 for example don't know it at all.

JamesUniguy:
i need thoose 3 columns to be dynamically adjustable, not static
Set the width of your cols in % values:
.col1 { width: 20% }
This means that width will be 20% of the window total width.

dunxd · Jul 30, 2002

starway: are you sure that you aren't getting static muddled with fixed? All the (non-microsoft) documentation I have seen says that IE and NN supported static since version 4.

My continuing adventures:
So now I have managed to get the layout I wanted to an extent.
Have a look here:

http://www.prostate.org.uk/CSS/test1.html

A few notes:
[ul]
[li]You have to make the last column DIV in your main DIV have the position:relative and the others position:absolute[/li]
[li]The column with the most content in (ie the one that will have the greatest height) must be the right most, and the last one in your main DIV. The footer is aligned to the bottom of the last DIV irrespective of which DIV has the most content. See my example page above[/li]
[/ul]
Obviously if your page is dynamically created to put content in your DIVs this last point might create some problems.

If anyone sees a workaround (or indeed the correct way of doing this) please let me know!
--
Dunx

starway · Jul 30, 2002

Sorry, I mixed position:static with 'fixed'.

Anyway, I don't see static to be helpful (in your example also). It is said in DevGuru CSS reference that [tt]"static dictates that an element will be positioned as it occurs in the normal flow of the display of the page"[/tt].

But CSS-based page can hardly be treated as a "normal flow" as it consists of absolutely of relatively positioned content blocks.
Your page shows well that using static value for footer positioning is not useful. You should use relative or absolute to solve the problem.

I personally never used static and don't see how helpful it can be to me.

dunxd · Jul 30, 2002

I have tried giving the footer absolute and relative position, and neither fix the problem.

Have you read what relative values do?
The relative value moves the element an offset distance relative to the position it has in the normal flow of the display of the page.

All CSS pages can be treated as normal flow! It is only absolute (and fixed) values that take elements away from where they would appear logically from the HTML.

Anyway, that is an aside. All I want is a DIV that is the same height as the tallest DIV contained within it. --
Dunx

starway · Jul 30, 2002

OK, here's one way to do what you want:

1. remove ALL "position: relative;" and "position: absolute;" definitions for col1-3 and footer;

2. add "float:left;" to col1 and col2.

That's all.

dunxd · Aug 8, 2002

Yes, the float thing definitely works (though it doesn't really distribute my columns as neatly as I was hoping for).

And to make it work even better add clear:both to footer layer, and it will end up underneath all the other content!

If only Dreamweaver resolved float properly. --
Dunx

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Positioning at the bottom of content not screen 1

dunxd

Programmer

starway

Programmer

dunxd

Programmer

starway

Programmer

dunxd

Programmer

Jimuniguy

Technical User

starway

Programmer

dunxd

Programmer

starway

Programmer

dunxd

Programmer

starway

Programmer

dunxd

Programmer

Similar threads

Part and Inventory Search

Sponsor