Use Microsoft Expression Web to fix your Page Footer at the bottom

If you want the footer to be positioned to the bottom of your page, even while you scroll up and down the page, here is how you can do that in Expression Web 2.

1.        Add the footer div after your main container div. See example below:

<body>

                <!–Main container for the page begins here–>

                <div id=”master_container”>

                </div>

                <!–Main container for the page ends here–>

                <!–Footer begins here–>

                <div id=”footer”>

                </div>

                <!–Footer ends here–>

</body>

 

2.       Now go to the Apply Styles task pane and choose to create New Style.

3.       Click on the Selector drop down. Since we have already set id ‘footer’ to the footer div (see the code given above), #footer is automatically listed in the Selector drop down. Choose #footer. Choose to define the style in a new style sheet, or your existing style sheet or in the current page.  

4.       In the Category list select Position. Set the position to ‘fixed’, width to ‘100%’, height as per your requirements (in this example I would set the height to ‘50px’) bottom to ‘0px’ and left to ‘0px’.   

new_style 

The footer has now been positioned to the bottom.

5.       Now you can proceed with setting a background color, font, and such other properties. When saved and previewed the page should look like this:

footer_screen

 

 

Filed Under: Expression Web

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (0)

Trackback URL

Leave a Reply