Using CSS to create a 100% width footer

Using CSS to create a 100% width footer

Using CSS to create a 100% width footer

The footer is an often underutilized component of a successful website. In this tutorial you’ll learn how to use CSS to create a 100% width footer to take advantage of available screen sizes with larger browsers.

Technical Information

This tutorial uses id selectors for Layout positioning. An id selector specifies a style for a single element, it can only be used once per page. You can reuse the same id’s on multiple pages however. Also, HTML5 Dynamic will need to be set in the Site options. From the Tools menu > Options > Site Options > change the HTML output type to HTML5 Dynamic.

Drawing the Footer Layout region

1. Create a new blank website, name it footer
2. Click to the Page view of the Home page
3. Temporarily move the text navigation and Made With NetObjects badge from the bottom Master Border into the Layout area.
4. Expand the margins of the bottom Master Border to 160 pixels

5. Draw a Layout region onto the Master Border stage
6. Adjust the dimensions to 760x160 pixels

NetObjects Tip: You can view the width and height of any object in the bottom right corner of the application

7. Fill the Layout region with an appropriate color, try #999999
8. With the Layout region selected, click to the Grid Inspector

NetObjects Tip:You can enable the Grid Inspector window under the View menu > Grid Inspector

9. Look for the id field, change the name to footer

Drawing the Content Layout region

When a centered page is used, place your content inside footerContent. If your pages are not centered then you can skip to Adding CSS.

1. Draw a new Layout region inside the footer Layout
2. Set the dimensions to 760x120 pixels
3. With the Layout region selected, click to the Grid Inspector
4. Look for the id field, change the name to footerContent

Adding CSS

Now that our Footer is in place and the id’s have been named correctly, we can move on the Style view for the last portion of the tutorial. Click to the Style view now.

1. Click the CSS Code tab to access the CSS for the site
2. Add the following snippet of CSS after the Body element.

#footer {
float: left;
position: absolute;
left: 0;
width: 100%;
height: 165px;
}

For centered pages add this snippet as well:

#footerContent {
position: absolute;
left: 50%;
width: 960px;
margin-left: -480px
}

When you’re comfortable with the steps, you can apply these techniques to your own website projects.