Home/ Questions/Q 7007801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:39:14+00:00

At the moment, my footer ( found here ) is the same width as

  • 0

At the moment, my footer (found here) is the same width as the wrapper. However, I’d like to get it so that it goes the full width of the page.
The problem is, I can’t seem to get it out of the wrapper.
I would show you my index.php file, but it doesn’t seem to display properly here.

To give you a brief overview, I am using the 

<?php include("footer.html");?>

to call the footer into each of my pages, which are all PHP files. I am doing the same thing for the header as well.

If anyone has Google Chrome, with the Developer view (think it’s a default extension, accessed with F12?) you’ll see that the call is in the wrapper. If I drag the called footer_wrapper section and put it at the same level as the wrapper, by dragging it down to above the /body, it does exactly what I want, and expands the footer to cover the page.
EDIT: It works fine there, but that’s only in Developer mode in Chrome, so nothing is saved. The problem is, I don’t know how to replicate that in the actual PHP file

I know that was a poor explanation, but I’m really not sure how to explain it properly!

Any help would be great!

EDIT – Here is my attempt at posting my index.php code:
All the indents etc make it a look very messy, and for that I apologise. If you’d like to see the raw code for the index.php, footer.html and header.html, here’s the download link

<?php $thisPage="Home";?>
<html>
<head>
<title>Multiverse: The MMO Development Platform</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
</html>

<?php include("header.html");?>

<html>
<div id="content">

 <h2>Homepage</h2>
 <br/>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend imperdiet magna a tempor. Maecenas eu vulputate turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet lorem sed dolor dignissim pulvinar. Sed mauris ipsum, interdum lobortis mattis sed, pellentesque id lacus. Sed sapien metus, dignissim in convallis eget, aliquet et nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nunc risus, pulvinar in venenatis ultricies, mollis vel lectus.</p>
          <br/>
          <p>Suspendisse condimentum suscipit faucibus. Integer rutrum tincidunt neque sed sollicitudin. Donec pulvinar arcu id mauris luctus lacinia. Nam eu tempor  velit. Etiam molestie mattis dolor quis lobortis. Mauris mollis, risus at ultrices cursus, sem elit ultricies lectus, eu pretium urna magna a nisi. Maecenas nibh ante, fringilla quis sagittis non, vulputate eu urna. Cras ut turpis orci. Donec tempor bibendum neque. Curabitur ac augue id arcu consectetur adipiscing vestibulum non lorem. In ultrices aliquet augue, hendrerit scelerisque lorem interdum sit amet. Aliquam dictum ipsum varius nisl faucibus ultricies. Vivamus sollicitudin, ligula sed consequat suscipit, augue nulla placerat ante, eu tempus turpis ligula ut mauris.</p>
          <br/>
          <p>Praesent vehicula nisi in velit fringilla porttitor. Duis vulputate risus id sem fringilla auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer id placerat est. Mauris eu leo lacus. Maecenas nibh turpis, congue sed auctor mattis, vestibulum in dolor. Sed auctor commodo nunc. Donec varius posuere lorem, vel bibendum dui euismod vitae. Fusce nec accumsan leo. Maecenas et diam a eros adipiscing venenatis ac eget diam. Fusce semper massa sed eros fringilla sodales. Vestibulum a nibh velit, at adipiscing turpis. Maecenas quis nulla elit, a luctus nunc. Suspendisse nec risus vitae massa mattis adipiscing.</p>
          <br/>
          <p>Curabitur ultrices facilisis scelerisque. Vivamus varius ornare felis, et auctor lacus imperdiet ut. Vivamus vestibulum molestie tellus, eget pulvinar justo dignissim non. Fusce posuere orci vel ligula pretium tempor id sit amet ligula. Nam lectus sem, imperdiet a placerat et, pulvinar in diam. Suspendisse potenti. Nulla sit amet metus magna. Phasellus dapibus molestie mauris at tempus. Aliquam ac risus elit. Vivamus dapibus enim eu orci lobortis aliquam.</p>
          <br/>
          <p>Vivamus ullamcorper consectetur pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eleifend nisi nec odio imperdiet molestie. Maecenas at nulla tortor, in condimentum lorem. Quisque aliquam tellus non velit varius fermentum. Vivamus sit amet nisi risus, sed sagittis risus. Duis dictum justo et diam vulputate egestas. Suspendisse vel lacus nibh, nec venenatis risus. Duis ac metus sapien, a sollicitudin mi. Vivamus elementum urna eget mauris laoreet hendrerit. Cras vestibulum rutrum nunc, et ultrices turpis congue in. Aliquam sed lorem ligula. Phasellus mollis erat in metus tincidunt pretium.</p>
          <br/>


  <h2>Image examples</h2>
  <p>&nbsp;</p>
  <div id="stock">
    <img src="images/stock.png" alt="Stock Images!" />&nbsp;&nbsp;&nbsp;<img src="images/stock.png" alt="Stock Images!" />
  </div>

<div id="featured_content">

        <div class="featured_block">
    <h3>Why Choose Multiverse?</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/Asset-Browser-Wireframes1.jpeg);"><a href="http://www.heroengine.com/heroengine/why-heroengine/"></a></div>
    <div class="text">
      <p>The Multiverse Platform, provides you with world building tools, renderer, integrated server architecture and an entire game’s worth of example code.</p>
    </div>
  </div>  
        <div class="featured_block">
    <h3>No Programming Required</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/Why-HeroCloud-IS-Right-For-You.jpg);"><a href="http://www.heroengine.com/herocloud/"></a></div>
    <div class="text">
      <p>You can actually make a functional MMO without programming knowledge. You only need to program when you want to make an advanced MMO.</p>
    </div>
  </div>  
        <div class="featured_block">
    <h3>Don't Spend A Cent</h3>
    <div class="image" style="background-image:url(http://www.heroengine.com/wp-content/uploads/2011/10/hfibhbcf.jpg);"><a href="http://www.heroengine.com/2011/10/failure-is-not-an-option-its-a-requirement-the-culture-of-testing-everything/"></a></div>
    <div class="text">
      <p>President and COO of HeroEngine, Neil Harris, discusses failure, it’s role in online game development and the culture of testing everything in his latest blog post.</p>
    </div>
  </div>  

</div>
</div>
<?php include("footer.html");?>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I imagine index.php looks something like this?

    <div id="wrapper">
    <?php include("header.html");?>
    <div id="content">
    <!-- generate content -->
    </div>
    <?php include("footer.html");?>
</div>

    Change it so you include footer.html outside of the wrapper div:

    Also, it looks like your includes (header.html, footer.html, etc.) are themselves full HTML documents. That is, they include <html> and <body> tags. This is Very Bad.

    The final page the browser sees should have only one html element and one body element. These includes should not include anything but the actual HTML elements you want inserted at a given point.

    For example, footer.html should look like this:

    <div id="footer_wrap">
    <!-- code for footer -->
</div>

    It’s sometimes easier to use different file extensions for includes [.include, .tmpl, etc.] as a quick reminder that they aren’t full HTML documents.

    Fixed everything up for you. Download here. Basically, I removed the extraneous html and body tags from index.php, and closed the wrapper div at the start of footer.html instead of at the end. Which effectively “drags” it outside that wrapper div.

    • 0