Page DIV extends into Footer away from Homepage

Hello,

I am stumped. I have a website (developing offline), where the footer is full length on the homepage, but not any other page.

I have a div id=“page,” that has a max width of 1200. On the homepage the div page ends before the header, allowing my footer with a 100% width to reach from end to end. But on any other page the div named page runs to the end of the page. This leaves my footer at the max width of 1200.

Anyone have any ideas? I have a few if statements involving the homepage so I wonder if something went wrong there?

Here is the HTML from the site:

(Obviously using Drupal and a Zen Sub-theme :))

<?php
/**
 * @file
 * Zen theme's implementation to display a single Drupal page.
 *
 * Available variables:
 *
 * General utility variables:
 * - $base_path: The base URL path of the Drupal installation. At the very
 *   least, this will always default to /.
 * - $directory: The directory the template is located in, e.g. modules/system
 *   or themes/bartik.
 * - $is_front: TRUE if the current page is the front page.
 * - $logged_in: TRUE if the user is registered and signed in.
 * - $is_admin: TRUE if the user has permission to access administration pages.
 *
 * Site identity:
 * - $front_page: The URL of the front page. Use this instead of $base_path,
 *   when linking to the front page. This includes the language domain or
 *   prefix.
 * - $logo: The path to the logo image, as defined in theme configuration.
 * - $site_name: The name of the site, empty when display has been disabled
 *   in theme settings.
 * - $site_slogan: The slogan of the site, empty when display has been disabled
 *   in theme settings.
 *
 * Navigation:
 * - $main_menu (array): An array containing the Main menu links for the
 *   site, if they have been configured.
 * - $secondary_menu (array): An array containing the Secondary menu links for
 *   the site, if they have been configured.
 * - $secondary_menu_heading: The title of the menu used by the secondary links.
 * - $breadcrumb: The breadcrumb trail for the current page.
 *
 * Page content (in order of occurrence in the default page.tpl.php):
 * - $title_prefix (array): An array containing additional output populated by
 *   modules, intended to be displayed in front of the main title tag that
 *   appears in the template.
 * - $title: The page title, for use in the actual HTML content.
 * - $title_suffix (array): An array containing additional output populated by
 *   modules, intended to be displayed after the main title tag that appears in
 *   the template.
 * - $messages: HTML for status and error messages. Should be displayed
 *   prominently.
 * - $tabs (array): Tabs linking to any sub-pages beneath the current page
 *   (e.g., the view and edit tabs when displaying a node).
 * - $action_links (array): Actions local to the page, such as 'Add menu' on the
 *   menu administration interface.
 * - $feed_icons: A string of all feed icons for the current page.
 * - $node: The node object, if there is an automatically-loaded node
 *   associated with the page, and the node ID is the second argument
 *   in the page's path (e.g. node/12345 and node/12345/revisions, but not
 *   comment/reply/12345).
 *
 * Regions:
 * - $page['header']: Items for the header region.
 * - $page['navigation']: Items for the navigation region, below the main menu (if any).
 * - $page['help']: Dynamic help text, mostly for admin pages.
 * - $page['highlighted']: Items for the highlighted content region.
 * - $page['content']: The main content of the current page.
 * - $page['sidebar_first']: Items for the first sidebar.
 * - $page['sidebar_second']: Items for the second sidebar.
 * - $page['footer']: Items for the footer region.
 * - $page['bottom']: Items to appear at the bottom of the page below the footer.
 *
 * @see template_preprocess()
 * @see template_preprocess_page()
 * @see zen_preprocess_page()
 * @see template_process()
 */
?>



  <header id="header" role="banner">
	<div class="wrap">
	  <div class="content-wrap">
		  <div id="logo">
			<?php if ($logo): ?>
			  <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
			<?php endif; ?>
		  </div>
			<?php if ($site_name || $site_slogan): ?>
			  <hgroup id="name-and-slogan">
				<?php if ($site_name): ?>
				  <h1 id="site-name">
					<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
				  </h1>
				<?php endif; ?>

				<?php if ($site_slogan): ?>
				  <h2 id="site-slogan"><?php print $site_slogan; ?></h2>
				<?php endif; ?>
			  </hgroup><!-- /#name-and-slogan -->
			<?php endif; ?>

			<?php if ($secondary_menu): ?>
			  <nav id="secondary-menu" role="navigation">
				<?php print theme('links__system_secondary_menu', array(
				  'links' => $secondary_menu,
				  'attributes' => array(
					'class' => array('links', 'inline', 'clearfix'),
				  ),
				  'heading' => array(
					'text' => $secondary_menu_heading,
					'level' => 'h2',
					'class' => array('element-invisible'),
				  ),
				)); ?>
			  </nav>
			<?php endif; ?>
			<?php print render($page['header']); ?>
		  <div id="highlight"></div>
	  </div> <!-- .content-wrap -->	
	</div> <!-- .wrap -->
  </header>

  <div id="social-media">
    <?php print $breadcrumb; ?>
	<div id="facebook" class="icons">
	  <a href="#"><img src="/amaware/sites/all/themes/amaware/css/images/facebookicon.png" /></a>
	</div>
	<div id="twitter" class="icons">
	  <a href="#"><img src="/amaware/sites/all/themes/amaware/css/images/twittericon.png" /></a>
	</div>
  </div>

  <?php if ($is_front) { ?>
	  <div id="featured">
		<div id="slide-show-bg" class="wrap">
		  <?php print render($page['featured']); ?>
		</div>		
	  </div>
  <?php	} ?>

<div id="page" class="wrap">
  <div id="main">

    <div id="content" class="column" role="main">
	  <div class="content-wrap">
        <?php print render($page['highlighted']); ?>
	    <?php if ($is_front) { ?>
	      <div id="divider">
	        <img class="divider" src="/amaware/sites/all/themes/amaware/css/images/sloganline.png" />
          </div>
	  </div>	
	  <?php } ?>
      <a id="main-content"></a>
      <?php print render($title_prefix); ?>
      <?php if ($title && !drupal_is_front_page()): ?>
        <h1 class="title" id="page-title"><?php print $title; ?></h1>
      <?php endif; ?>
      <?php print render($title_suffix); ?>
      <?php print $messages; ?>
      <?php print render($tabs); ?>
      <?php print render($page['help']); ?>
      <?php if ($action_links): ?>
        <ul class="action-links"><?php print render($action_links); ?></ul>
      <?php endif; ?>
      <?php  if(drupal_is_front_page()) {
				unset($page['content']['system_main']['default_message']);
			}
      print render($page['content']);
      ?>
      <?php print $feed_icons; ?>
    </div><!-- /#content -->

    <div id="navigation">

      <?php if ($main_menu): ?>
        <nav id="main-menu" role="navigation">
          <?php
          // This code snippet is hard to modify. We recommend turning off the
          // "Main menu" on your sub-theme's settings form, deleting this PHP
          // code block, and, instead, using the "Menu block" module.
          // @see http://drupal.org/project/menu_block
          print theme('links__system_main_menu', array(
            'links' => $main_menu,
            'attributes' => array(
              'class' => array('links', 'inline', 'clearfix'),
            ),
            'heading' => array(
              'text' => t('Main menu'),
              'level' => 'h2',
              'class' => array('element-invisible'),
            ),
          )); ?>
        </nav>
      <?php endif; ?>

      <?php print render($page['navigation']); ?>

    </div><!-- /#navigation -->

    <?php
      // Render the sidebars to see if there's anything in them.
      $sidebar_first  = render($page['sidebar_first']);
      $sidebar_second = render($page['sidebar_second']);
    ?>

    <?php if ($sidebar_first || $sidebar_second): ?>
      <aside class="sidebars">
        <?php print $sidebar_first; ?>
        <?php print $sidebar_second; ?>
      </aside><!-- /.sidebars -->
    <?php endif; ?>

  </div><!-- /#main -->

</div><!-- /#page -->
  <div id="footer-top"></div>
  <div id="footer">
    <?php if ($page['footer_1'] || $page['footer_2'] || $page['footer_3']):?>
      <div id="footer-columns" class="wrap">
		 <?php print render($page['footer_1']); ?>
		 <?php print render($page['footer_2']); ?>
		 <?php print render($page['footer_3']); ?>
	   </div><!-- /#footer-columns -->
	<?php endif; ?>
  </div>
<?php print render($page['bottom']); ?>

Thank you for any help!

Hi,

Can you post the html from view source on the page that you say is broken as it will be easier to spot where the error is.

It is likely you have a missing closing div or an extra opening div thus making the footer reside inside the page wrapper. Once the extra div is located then you will be able to double check the php code for that section



      <p id="skip-link">
      <a href="#main-menu" class="element-invisible element-focusable">Jump to navigation</a>
    </p>



  <header id="header" role="banner">
	<div class="wrap">
	  <div class="content-wrap">
		  <div id="logo">
						  <a href="/amaware/" title="Home" rel="home" id="logo"><img src="http://localhost/amaware/sites/all/themes/amaware/css/images/logo.png" alt="Home"></a>
					  </div>
			
						  <div class="region region-header">
    <div id="block-menu-block-1" class="block block-menu-block first last odd" role="navigation">


  <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
  <ul class="menu"><li class="first leaf menu-mlid-218"><a href="/amaware/">Home</a></li>
<li class="leaf menu-mlid-326"><a href="/amaware/data">Data</a></li>
<li class="leaf active-trail active menu-mlid-315"><a href="/amaware/about" class="active-trail active">About</a></li>
<li class="leaf menu-mlid-327"><a href="/amaware/calendar">Calendar</a></li>
<li class="leaf menu-mlid-328"><a href="/amaware/contact">Contact</a></li>
<li class="last leaf menu-mlid-445"><a href="http://localhost/amaware/blog" title="">Blog</a></li>
</ul></div>

</div><!-- /.block -->
  </div><!-- /.region -->
		  <div id="highlight"></div>
	  </div> <!-- .content-wrap -->	
	</div> <!-- .wrap -->
  </header>

  <div id="social-media">
    <nav class="breadcrumb" role="navigation"><h2 class="element-invisible">You are here</h2><ol><li><a href="/amaware/">Home</a>-></li></ol></nav>	<div id="facebook" class="icons">
	  <a href="#"><img src="/amaware/sites/all/themes/amaware/css/images/facebookicon.png"></a>
	</div>
	<div id="twitter" class="icons">
	  <a href="#"><img src="/amaware/sites/all/themes/amaware/css/images/twittericon.png"></a>
	</div>
  </div>


<div id="page" class="wrap">
  <div id="main">

    <div id="content" class="column" role="main">
	  <div class="content-wrap">
        	          <a id="main-content"></a>
                    <h1 class="title" id="page-title">About</h1>



<article class="node-1 node node-page view-mode-full clearfix" about="/amaware/about" typeof="foaf:Document">


  <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>X</p>
</div></div></div>


</article><!-- /.node -->
<!-- block__no_wrapper -->
<!-- region__no_wrapper -->
          </div><!-- /#content -->

    <div id="navigation">



    </div><!-- /#navigation -->



  </div><!-- /#main -->

</div><!-- /#page -->
  <div id="footer-top"></div>
  <div id="footer">
          <div id="footer-columns" class="wrap">
		   <div class="region region-footer-1">
    <div id="block-webform-client-block-20" class="block block-webform first last odd">

        <h2 class="block-title">Contact Us</h2>

  <form class="webform-client-form" enctype="multipart/form-data" action="/amaware/contact-us" method="post" id="webform-client-form-20" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield webform-container-inline" id="webform-component-name">
  <label for="edit-submitted-name">Name <span class="form-required" title="This field is required.">*</span></label>
 <input id="edit-submitted-name" name="submitted[name]" value="" size="60" maxlength="128" class="form-text required" type="text">
</div>
<div class="form-item webform-component webform-component-textfield webform-container-inline" id="webform-component-e-mail">
  <label for="edit-submitted-e-mail">E-mail <span class="form-required" title="This field is required.">*</span></label>
 <input id="edit-submitted-e-mail" name="submitted[e_mail]" value="" size="60" maxlength="128" class="form-text required" type="text">
</div>
<div class="form-item webform-component webform-component-textarea" id="webform-component-message">
  <label for="edit-submitted-message">Message <span class="form-required" title="This field is required.">*</span></label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-submitted-message" name="submitted[message]" cols="60" rows="5" class="form-textarea required"></textarea><div class="grippie"></div></div>
</div>
<input name="details[sid]" value="" type="hidden">
<input name="details[page_num]" value="1" type="hidden">
<input name="details[page_count]" value="1" type="hidden">
<input name="details[finished]" value="0" type="hidden">
<input name="form_build_id" value="form-NVaWhdErs67YRgxzE4bDc37-U5Hrm7LPPvvC4AbTAfo" type="hidden">
<input name="form_id" value="webform_client_form_20" type="hidden">
<div class="form-actions form-wrapper" id="edit-actions"><input id="edit-submit" name="op" value="Submit" class="form-submit" type="submit"></div></div></form>
</div><!-- /.block -->
  </div><!-- /.region -->
		   <div class="region region-footer-2">
    <div id="block-block-3" class="block block-block first last odd">

        <h2 class="block-title">Data</h2>

  <p>Download the DataView the DataView GraphSources:source 1, more source information (source source).source 1, more source information (source source).source 1, more source information (source source).&nbsp;&nbsp;&nbsp;&nbsp;</p>

</div><!-- /.block -->
  </div><!-- /.region -->
		   <div class="region region-footer-3">
    <div id="block-block-2" class="block block-block first last odd">

        <h2 class="block-title">Partners</h2>

  <p><img src="/amaware/sites/all/themes/amaware/css/images/partnerimages/iqss.png"></p>

</div><!-- /.block -->
  </div><!-- /.region -->
	   </div><!-- /#footer-columns -->
	
  </div>
  </div>


I’ve taken a quick look at things and it becomes obvious there is an issue with the number of DIVS if I look at the source code, but I haven’t figured out exactly what it is, or why the code I have looks clean, but the source code isn’t. I sincerely appreciate the help and I’m going to keep trying to figure it out too

Hi,

From your code above it looks like the closing div for content-wrap is missing according to your comments.


<div id="page" class="wrap">
		<div id="main">
				<div id="content" class="column" role="main">
						<div class="content-wrap"> <a id="main-content"></a>
								<h1 class="title" id="page-title">About</h1>
								<article class="node-1 node node-page view-mode-full clearfix" about="/amaware/about" typeof="foaf:Document">
										<div class="field field-name-body field-type-text-with-summary field-label-hidden">
												<div class="field-items">
														<div class="field-item even" property="content:encoded">
																<p>X</p>
														</div>
												</div>
										</div>
								</article>
								<!-- /.node --> 
								<!-- block__no_wrapper --> 
								<!-- region__no_wrapper --> 
						</div>
						<!-- /#content -->
						
						<div id="navigation"> </div>
						<!-- /#navigation --> 
						
				</div>
				<!-- /#main --> 
				
		</div>
		<!-- /#page -->


You’ve marked all the closing tags for the other elements but content-wrap doesn’t have a closing tag in that section where it should.

Paul! Thank you.

The issue was I closed an if statement in my php like this:


	    <?php if ($is_front) { ?>
	      <div id="divider">
	        <img class="divider" src="/amaware/sites/all/themes/amaware/css/images/sloganline.png" />
              <?php } ?>
              </div>

So when the if statement ran the Divs were fine, but if it didn’t they’d be off. Thank you for leading me to the troubled area!

Glad you found it :slight_smile: