Footer suddenly wrapping around content

**constantvariable** · Nov 20, 2012 09:22

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-y...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:

Code:

<!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’t hesitate to get in touch with any queries or questions you might have. We’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>

**constantvariable** · Nov 20, 2012 11:03

Update:

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

Code:

#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

**Paul O'B** · Nov 20, 2012 13:08

Hi,

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

**constantvariable** · Nov 20, 2012 13:11

Hi Paul

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

**Paul O'B** · Nov 20, 2012 13:11

Ok, post when you've done it.

**constantvariable** · Nov 20, 2012 13:16

There we go.

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

**Paul O'B** · Nov 20, 2012 14:05

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

Code:

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

**constantvariable** · Nov 21, 2012 06:24

You're a saint! That was exactly it!

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

**Paul O'B** · Nov 21, 2012 06:47

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

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.

User Tag List

Thread: Footer suddenly wrapping around content

Thread Tools

Display

Footer suddenly wrapping around content

Bookmarks

Bookmarks

Posting Permissions