- 1). Launch an HTML editor or text editor and open an HTML document. Find the document’s style section and paste the following code inside that section:
.footer {bottom: 0px; width: 100%; bottom: 5px; position: absolute; text-align: center;}
.widgets { float: left; width: 100%; margin: 0 auto;}
The .footer CSS class defines the attributes of your Web page’s footer. The text-align attribute’s value is “center.” That enables browsers to center anything within the footer. The .widgets class defines the attributes of the div container that holds your widgets. The float attribute – whose value is “left” – insures that multiple widgets in the div sit next to each other. The most important attribute is margin. By giving it a value of “0 auto” you force browsers to center the widgets inside their div container. - 2). Add the following HTML code in the document’s body section:
<div class="footer">
<div class="widgets">
INSERT WIDGET HERE
INSERT WIDGET HERE
</div>
The first line of code creates the footer div. It references the footer class described in the previous section. The second div references the widgets class. This div sits inside the footer div. Replace the two lines that read “INSERT WIDGET HERE” with two of your widgets. - 3). Save your document and view it in your browser. Your widgets will appear centered at the bottom of the page in the page’s footer.
- 4). Add additional widgets to the div that contains the widgets. View your Web page in a browser after adding more widgets to make sure you don’t add too many. If you do, they will flow off the right side of the page and cause a horizontal scroll bar to appear.
- Advertisement -
- Advertisement -