You may want your footer area to be lodged at the bottom of the screen so that it is always visible. With the Protostar template, the <footer> div is located beneath and outside of the container.

<footer class="footer" role="contentinfo">

You can add styling to your custom stylesheet as shown below. In order for the footer to sit on top of other content, you may need to adjust the z-index. Remember, z-index only applies to divs that have a position: attribute listed. You can have postion: relative, position: fixed or position: absolute. If your footer isn't sitting nicely above your content, you may want to add position: relative and a z-index lower than the footer to the body .container styling

.body .container {
    position: relative;
    z-index: 5;

    position: fixed;
    z-index: 10;
    margin-top: -30px;
    width: 100%;
    padding-top: 6px;

You must have position: fixed, for the footer to always stay in one place relative to the containing div. In this case the containing div is <body>.

When you add top: 100%, you will actually push the div all the way off the screen. This is why you add the margin-top: -30px (or whatever height you want your footer). You might wonder why you don't simply declare the top: attribute in pixels, but remember, not everyone has the same size monitor, tablet or phone.

The width="100%" makes the footer stretch all the way across the screen.

With Protostar, there is a <div class="container"> within the <footer> div. The default styling for the class=container is a width of 960px and margin left and right of 'auto'. This means that the content within the <footer> will align in the middle of the screen.

If you are not using Protostar, you may find that additional styling will be needed. You may need to move the <footer> div outside of the content container.

Similar methods can be used to have a <header> that stretches across the entire screen.

An example of this styling can be found at which was developed using Joomla 3.2 and the Protostar template.