Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

302 LESSON 11: Using CSS to Position Elements on the Page

the bottom of the browser window at all times. First, I add an ordinary <div> to the page

with the ID bottom. Here’s the code:

<div id="bottom">

<strong>The Tiny Diner</strong> | 150 Water Street, Brooklyn, NY 11201

| 718.555.1111 | 11-10 Tues - Sat

</div>

The next step is to apply styles to the element so that it appears at the bottom of the

viewport in a fixed location. Here are the styles:

#bottom {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

text-align: center;

padding: 5px;

border-top: 3px solid blue;

background-color: #cccccc;

}

First, I set the positioning of the element as fixed. Then, I set the bottom and left prop-

erties to 0 to position the element in the bottom-left corner of the viewport. To create a

bar that runs the full length of the viewport, I set the width to 100%. Then I centered the

contents of the <div>, added some padding, and added a border to the top and specified a

background color. The results are shown in Figure 11.9.

FIGURE 11.9

A fixed bar at the

bottom of a web

page.