CSS Design Problem

[fileserverdirect]

Hi all,
I am in the middle of re-designing my website, from over 6 slow nested tables, to fast css. I was almost done when I got to the footer. It is normally at the bottom of the page, below the sidebar. I have tryed everthing I know about css (which isn't a whole lot). Please help.
The page:
http://ohptesting.awardspace.com/
The layout css page:
http://ohptesting.awardspace.com/layout.css
THANKS,

[Medyman]

try addding clear:both to the footer class.

[fileserverdirect]

Thanks Medyman,
It did not completly work though. It is half under some things in the middle of the page.
How can I get this to work?

[Medyman]

Move the copyright div to the bottom of your markup.

[fileserverdirect]

o.k. I did, but still nothing happened.

[Medyman]

I took another look at your markup (that's some markup btw...don't know how you work with it).

I said before that you should add clear:both to your footer class. That should really be added to your "end" class.

Some general tips:
1) Take out some more of those tables. I know you're switching from a table layout to CSS. But it sounded like from your first post that you were done. I think you can go a little further and take out even more.

* There are a lot of "empty" tags (i.e. tags with no content inside). They might be placeholders but if not, you should really remove them from your markup.

To my point #1, your footer or "end" div is a perfect example of where you can get rid of tables.

THIS:

<div class="end">
	<table cellpadding=0 cellspacing=0 style="margin-left: 14px; margin-right: 14px;" class=center>
		<tr>
			<td class=loose_graybar>
				<table>
					<tr>
						<td>
							<a href="#"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a></td><td><a href="#"><img src="./images/anybrowser.png" alt="Any Browser Compatable Site"></a>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<div class='graybar_full'>
		<div class="footer">
			Copyright &copy;2005-2008 Onion House Produtions&trade; All Rights Reserved &raquo; Your iP: XX.XXX.XXX.XXX
		</div>
	</div>
</div>

Can really be trimmed down to this:

<div class="end">
	<a href="#"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"></a>
	<a href="#"><img src="./images/anybrowser.png" alt="Any Browser Compatable Site"></a>
	Copyright &copy;2005-2008 Onion House Produtions&trade; All Rights Reserved &raquo; Your iP: XX.XXX.XXX.XXX
</div>

Apply some basic CSS, and you have the same result with much cleaner markup

[fileserverdirect]

I took another look at your markup (that's some markup btw...don't know how you work with it).

I do it all in php, so I rarely ever look at the actual markup.
---
O.K. I added clear: both; to the class "end". Still nothing. Why doesn't this work? I will change the footer stuff later.

[tfit]

I also got lost a bit, but your layout design seems not to difficult. That's to say the design not your code . I would put - and i think you did - put your topnavbar in a <div>. Everything on the left in a other <div> position absolute. And everyting from the main part to the bottom also in a <div>, postion absolute too and some padding. Seems cleaner to me. From there on you can get rid of all those classes and divs and use identifiers.