Why my footer bar is not coming below?

HTML & CSS
1

Hello,

I have made this design but the footer bar is not coming below. Please go here to see: Border

How to fix ??

Thanks.

2

add overflow hidden to #outer

3

Step one – lose the tables for NOTHING and non-semantic markup.

Step two – learn about float clearing behaviors.

Step three – learn to use semantic markup.

Step four – profit!!! :smiley:

It’s a little shocking to see HTML 3.2 techniques being used with a XHTML 1.0 Strict doctype – you have, from the top:

Paragraph around a non-paragraph element, presentational image for text applied with an image tag for what is your most likely H1 candidate. Extra DIV around tables for nothing, tables for nothing and/or around elements that should be LISTS. Presentational tags and attributes that have NO BUSINESS in a STRICT doctype or even in any HTML written after 1998 such as cellpadding, border, bgcolor, align, height, width, valign, font, face, color and size… To top this off you endlessly apply the same class to multiple elements in a row that have a perfectly good classed or ID’d block level container around them.

I have a saying “CSS is only as good as the HTML to which it’s applied” – and right now, your HTML has it’s head firmly wedged up 1997’s backside… layout problems? I’d be shocked if you didn’t have them.

From what I’m seeing for appearance, there is little reason for your current markup to be a whole lot more than this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Border
</title>

</head><body>

<div id="pageWrapper">
	<h1>
		Global<span>Tour <span>Network</span></span>
		<b><!-- image replacement --></b>
	</h1>

	<ul id="userMenu">
		<li class="first"><a href="#">Login</a></li>
		<li class="last"><a href="#">Register</a></li>
	</ul>

	<ul id="mainMenu">
		<li class="first"><a href="#">HOME</a></li>
		<li><a href="#">TOURS</a></li>
		<li><a href="#">REVIEWS</a></li>
		<li class="last"><a href="#">NETWORK</a></li>
	</ul>

	<ul id="bigItems">
		<li class="reviews"><a href="#">LATEST REVIEWS</a></li>
		<li class="tours"><a href="#">FEATURED TOURS</li>
	</ul>

	<div id="footer">
		<ul>
			<li><a href="faq.php">FAQ</a></li>
			<li><a href="contact.php">Contact</a></li>
			<li><a href="accessibility.php">Accessibility</a></li>
			<li><a href="corporate.php">Corporate</a></li>
			<li><a href="sitemap.php">Sitemap</a></li>
			<li><a href="tc.php">T&C</a></li>
			<li><a href="rss.php">RSS</a></li>
			<li><a href="news.php">News & PR</a></li>
			<li><a href="advertising.php">Advertising</a></li>
			<li><a href="privacy.php">Privacy</a></li>
		</ul>
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Everything else belonging in an external stylesheet. I’ll try to remember this for later. If I do, I’ll belt out the CSS to go with that.

4