Footer suddenly wrapping around content

HTML & CSS
1

Hi guys

A rookie website designer finding himself in a new dilemma here.

Ever since adding an image-mapped menu to my homepage, the footer of my site has stretched above my content, like so —> http://www.aspired-futures.com/can-you-help/fundraising-2/.

Furthermore, my navigation wrapper has seemed to bloated in size. I have a feeling the two are related.

I’ve tried back tracking, undoing all the changes I’ve made. I’ve tried replacing my edited html/php with the Theme’s original, both to no avail.

My code in full, according to html validator, looks like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Contact Us - Aspired Futures</title>
<link rel="stylesheet" type="text/css" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/style.css" media="screen" />
<!-- Check if alternitive color scheme is choosen -->
<link rel="stylesheet" type="text/css" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/styles/default.css" media="screen" />
<!-- Load Rich JS fonts -->
<script type="text/javascript" src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/typeface-0.15.js"></script>
<script type="text/javascript" src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/droid_serif_bold.typeface.js"></script>
<link rel="alternate" type="application/rss+xml" title="Aspired Futures &raquo; Contact Us Comments Feed" href="http://www.aspired-futures.com/contact-us/feed/" />
<link rel='stylesheet' id='contact-form-7-css' href='http://www.aspired-futures.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.2.1' type='text/css' media='all' />
<link rel='stylesheet' id='NextGEN-css' href='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
<link rel='stylesheet' id='shutter-css' href='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.4' type='text/css' media='screen' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.hoverIntent.minified.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.cookie.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.9.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.aspired-futures.com/?ver=pprjq1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var shutterSettings = {"msgLoading":"L O A D I N G","msgClose":"Click to Close","imageCount":"1"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.3'></script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/superfish.js?ver=3.4.1'></script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/slideshow.js?ver=3.4.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.aspired-futures.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.aspired-futures.com/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='Volunteers' href='http://www.aspired-futures.com/volunteers/' />
<link rel='next' title='Our Volunteers' href='http://www.aspired-futures.com/volunteers/our-volunteers/' />
<meta name="generator" content="WordPress 3.4.1" />
<link rel='canonical' href='http://www.aspired-futures.com/contact-us/' />
<!-- <meta name="NextGEN" version="1.9.7" /> -->
<!--[if IE 6]>
<script type="text/javascript" src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/pngfix.js"></script>
<script type="text/javascript" src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/includes/js/menu.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/css/ie8.css" />
<![endif]-->
<!-- Start slideshow -->
</head>
<body >
<div id="wrapper">
<div id="head_content">
<div id="head_wrap">
<!-- Header Menu -->
<div class="typeface-js" id="top-nav">
<a class="home" href="http://www.aspired-futures.com" ></a>
<ul class="nav">
<li class="page_item page-item-2"><a href="http://www.aspired-futures.com/about/"><span class="menu">About</span></a>
<ul class='children'>
<li class="page_item page-item-39"><a href="http://www.aspired-futures.com/about/who-we-are/"><span class="menu">Who we are</span></a></li>
<li class="page_item page-item-44"><a href="http://www.aspired-futures.com/about/what-we-do/"><span class="menu">What we do</span></a></li>
<li class="page_item page-item-54"><a href="http://www.aspired-futures.com/about/the-house/"><span class="menu">The House</span></a></li>
<li class="page_item page-item-198"><a href="http://www.aspired-futures.com/about/bespoke-holiday-provisions/"><span class="menu">Bespoke Holiday Provisions</span></a></li>
<li class="page_item page-item-41"><a href="http://www.aspired-futures.com/about/how-to-access-our-services/"><span class="menu">How to access our services</span></a></li>
</ul>
</li>
<li class="page_item page-item-13"><a href="http://www.aspired-futures.com/can-you-help/"><span class="menu">Can you help?</span></a>
<ul class='children'>
<li class="page_item page-item-58"><a href="http://www.aspired-futures.com/can-you-help/friends/"><span class="menu">Friends of Aspired Futures</span></a></li>
<li class="page_item page-item-107"><a href="http://www.aspired-futures.com/can-you-help/fundraising-2/"><span class="menu">Fundraising</span></a></li>
</ul>
</li>
<li class="page_item page-item-22"><a href="http://www.aspired-futures.com/volunteers/"><span class="menu">Volunteers</span></a>
<ul class='children'>
<li class="page_item page-item-35"><a href="http://www.aspired-futures.com/volunteers/our-volunteers/"><span class="menu">Our Volunteers</span></a></li>
<li class="page_item page-item-37"><a href="http://www.aspired-futures.com/volunteers/can-you-help/"><span class="menu">Can you help?</span></a></li>
<li class="page_item page-item-264"><a href="http://www.aspired-futures.com/volunteers/volunteer-application-form/"><span class="menu">Volunteer application form</span></a></li>
</ul>
</li>
<li class="page_item page-item-25 current_page_item"><a href="http://www.aspired-futures.com/contact-us/"><span class="menu">Contact Us</span></a></li>
</ul>
<!-- /Menu -->
</div>
<!-- Logo -->
<div id="logo">
<a href="http://www.aspired-futures.com" title="Aspired Futures"><img src="http://www.aspired-futures.com/wp-content/uploads/2012/10/AspiredFlogo21.png" /></a>
</div><!-- /#logo -->
<div class="clear"></div>
<!-- Check if is homepage, if is include slideshow -->
</div></div>
<div id="ribbon_content">
<div id="ribbon_title">
<h1 id="pagetitle" ><a id="pagetitle" href="http://www.aspired-futures.com/contact-us/" title="Contact Us">Contact Us</a></h1>
</div></div>
<div id="content" class="page col-full">
<div id="main" class="col-left">
<div class="post">
<div class="entry">
<h2>Fancy a chat?</strong></h2>
<p>Don&#8217;t hesitate to get in touch with any queries or questions you might have. We&#8217;re more than happy to discuss how Aspired-Futures could benefit you.</p>
<div class="wpcf7" id="wpcf7-f26-p25-o1"><form action="/contact-us/#wpcf7-f26-p25-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="26" />
<input type="hidden" name="_wpcf7_version" value="3.2.1" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f26-p25-o1" />
<input type="hidden" name="_wpnonce" value="bbaf301f9d" />
</div>
<p>Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
<p>Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" /></span> </p>
<p>Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" class="wpcf7-form-control wpcf7-text" size="40" /></span> </p>
<p>Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" class="wpcf7-form-control wpcf7-textarea" cols="40" rows="10"></textarea></span> </p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
<h2>Where we are</h2>
<p>Kensington Foundation Lodge</p>
<p>216 Whitegate Drive</p>
<p>Blackpool</p>
<p>FY3 9JL</p>
</div><!-- /.entry -->
</div><!-- /.post -->
</div><!-- /#main -->
<div id="sidebar" class="col-right">
<div id="sidebar_content">
<div id="text-2" class="widget widget_text"><h3>Noticeboard<span>&nbsp;</span></h3>	 <div class="textwidget"><p>Recent activity</p>
</div>
</div>
</div>
</div><!-- /#sidebar -->
</div><!-- /#content -->
<div id="footer">
<div class="inner">
<!-- Footer Menu-->
<ul class="nuv">
<li ><a href="http://www.aspired-futures.com">Home</a></li>
<li class="page_item page-item-2"><a href="http://www.aspired-futures.com/about/">About</a></li>
<li class="page_item page-item-13"><a href="http://www.aspired-futures.com/can-you-help/">Can you help?</a></li>
<li class="page_item page-item-22"><a href="http://www.aspired-futures.com/volunteers/">Volunteers</a></li>
<li class="page_item page-item-25 current_page_item"><a href="http://www.aspired-futures.com/contact-us/">Contact Us</a></li>
</ul>
<!-- Get Social Icons -->
<div id="social_foot">
<a target="_blank" href="#"><img src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/images/fb_icon.png" /></a>
<a target="_blank" href="#"><img src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/images/tw_icon.png" /></a>
<a href="/feed"><img src="http://www.aspired-futures.com/wp-content/themes/foundation/foundation/images/rss_icon.png" /></a>
</div>
<div class="clear"></div>
</div>
<!-- Footer copywrite text -->
<div id="copywrite"> <p>
&copy; 2012&nbsp;Aspired Futures. All rights Reserved.</p><a target="_blank" class="logo_icon" href="http://www.wordpressnonprofit.com">Non-Profit Wordpress Themes</a>
</div>
<div class="fix"></div>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.js?ver=3.14'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\\/\\/www.aspired-futures.com\\/wp-content\\/plugins\\/contact-form-7\\/images\\/ajax-loader.gif","sending":"Sending ..."};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.aspired-futures.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.2.1'></script>
<!-- /Get Analytics Code -->
</body>
</html>
2

Update:

I’ve narrowed it down to the following image map CSS:


#imgmap {
	position: relative;
	_zoom: 1;
}

#imgmap li {
	position: absolute;
	display: block;
	list-style: none;
	outline:none;
	overflow: hidden;
}

#imgmap li a {
	display: block;
	width: 100%;
	height: 100%;
	_background: url(space.gif);
	text-indent: -1000em;
}

#area1 {
	left: 76px;
	top: 43px;
	width: 166px;
	height: 117px;
}

#area2 {
	left: 438px;
	top: 18px;
	width: 167px;
	height: 111px;
}

#area3 {
	left: 746px;
	top: 86px;
	width: 191px;
	height: 133px;
}

#area4 {
	left: 753px;
	top: 236px;
	width: 182px;
	height: 144px;
}

#area5 {
	left: 771px;
	top: 522px;
	width: 149px;
	height: 107px;
}

#area6 {
	left: 471px;
	top: 489px;
	width: 166px;
	height: 91px;
}

#area7 {
	left: 143px;
	top: 538px;
	width: 149px;
	height: 99px;
}

#area8 {
	left: 10px;
	top: 383px;
	width: 156px;
	height: 61px;
}

Can anyone identify where the issue lies?

Thanks

3

Hi,

The footer looks at the bottom of the page to me. Have you fixed it or am I looking in the wrong place?

4

Hi Paul

I’ve actually removed that CSS for the time being, I’ll add it back in and show you the result

5

Ok, post when you’ve done it.

6

There we go.

http://www.aspired-futures.com/volunteers/can-you-help/

7

You haven’t cleared the floats so either add clear:both to #footer or use a clearing mechanism on Content.


#content:after {
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden
}
8

You’re a saint! That was exactly it!

Massively appreciate your time man, how did you diagnose it, so I know for next time?

9

It’s a common mistake - we see it hundreds of times here in the forums and one of the first things to look for.:slight_smile:

If the background of an element is stretching above where its supposed to be then the chances are you haven’t contained (or cleared) your floats.