The Foot Sticker | Francisco Scardamaglia

The Hated FOOT STICKER! Building a Simple Centered DIV page using CSS! Download This Tutorial Example 1 Example 2 Example 3 The foot sticker is one of the frustrating parts of building a webpage using DIV’s. There is usually a lot of bugs with using overlapping fixed layers, but I think I solved the problem. To start I’m going to demonstrate how to build a simple “centered” DIV based web page using CSS.
Start off by creating a fresh page, Also I recommend an external CSS page Why Use External CSS? It keeps your website design and content separate. It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag. You can make drastic changes to your web pages with just a few changes in a single CSS file. Now the DIVS • Create a DIV tag by hitting the Insert Div Tag button

• Give the div tag an ID named “container”. • A container is used to hold all the div layers. This is like the <body> tag, you use this to contain all your divs. The <div> tag defines a division/section in a document. An ID is the identificator for that particular div tag. Usually displayed, <div id=”container”>

Here I have a fresh CSS page named foot_i.css, you can use any CSS page you want. • Click the New CSS Rule button to create a new rule.

• For my new CSS rule I checked the box Advanced and chose my container ID from the Selector drop down for my rule.

To start with my container I adjust the Positioning defining the size. For my container I want it to over power the page becoming the whole page, so I set it to a 100% Width, with a 0 for the Top, Right, and Left placement, assuring that the Container sticks to the top, left, and right. For the Height you can use any size you would like typically over 500px, for this sample page I used 700px. To finish this Off I want it to absolutely be on the page. WHAT IS ABSOLUTE? Hit OK and save.
After you have your Container defined you can start adding new DIV tags. • Insert Div The DIV you need to to create needs to be NESTED in the Container div, enabling it to be a child of the Container Parent.

• The ID I choose for this DIV is the “head” I want this to be at the top of the page.

• Create a New CSS Rule for the “head” ID. From the selector drop down choose #container #head Click OK


• For my new rule I will Set the Width to 800 px, my Height to 150 and I would like this stuck to the top so I set my Placement of Top to 0.

Next in the Box option, I set my Margins to Auto, this will Center my New DIV tag by autoing my margins left and right. • Define the ID, this one would be my “content” div.

• Create a New CSS rule for the Content Div


For the size of my Content DIV I use WIDTH of 800px and Height of 400px Next • Set the Box options according to the previous setting as in the Head DIV I set my Margins to Auto, this will Center my New DIV tag by autoing my margins left and right.

• Create a New DIV tag defining the ID as “foot” • Next Create a new CSS rule for the “foot” ID

Now we Create the Foot Sticker, there are two ways to do this, One we have the foot div being fixed to the browser Or we have the foot div to be constintaly stuck to the bottom of the “container”

Well start with the foot being stuck to the bottom of the Container DIV. By setting the Type to absolute. WHAT IS ABSOLUTE? The foot DIV will always be zeroed to the bottom of the “container” Heres what It would look like. • Sample 1

The next type would be the Fixed foot div. All you got to do is select fixed as the Type of positioning. That would fix the foot div to the Bottom of the browser window like this. • Sample 2 Heres another Foot type, figure this out and you become the master. :p • Sample 3 Hit OK and save. * In most cases when a Foot sticker does not work you can add bottom: 0 !important; Static: Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) Relative: An element with position: relative moves an element relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position Absolute: An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties Fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
Back to TOP

The Hated FOOT STICKER!

Why Use External CSS?