How to Float the Footer Below the Content Sidebar in WordPress
WordPress uses themes as templates that dictate the look of your website. These themes come in parts that separate the header, contents, sidebars and footers. A style sheet called "style.css" applies a systematic set of style elements to every part. When creating your own theme, you will need to know how to write code for this file to float columns and clear them for footers. Use the "clear: both;" code to clear floated columns. Whether your code floats the content or sidebar to the left or right, "clear: both" will place an element below both of them.
Other People Are Reading
Instructions
-
-
1
Log in to WordPress and go to "Appearance." Click on the "Editor" link to load the Edit Themes screen. Locate "footer.php" at the bottom of the screen and click its link.
-
2
Read the code in your "footer.php" file and find the ID name of the HTML tags that wrap around the footer:
<div id="footer">
Footer content here...
</div>
Themes coded in HTML 4 or XHTML wrap DIV tags around the footer, but HTML 5 themes will use Footer tags instead.
-
-
3
Click the link to "style.css" and go to the bottom of the file. Add this code:
#footer {
clear: both;
}
Change "footer" to the ID name in your "footer.php" code. In the case that your code used Footer tags with no ID name, change "#footer" to "footer."
-
4
Click "Save," then click load your site in a browser to check that the formatting is successful.
-
1
Tips & Warnings
If your theme uses class names such as "span-12" or "grid_10," then your theme uses a CSS framework. The one using "span" is Blueprint while the one using "grid" is 960 Grid System. Follow directions for either framework to position your footer.
Back up your theme files before editing them. These files are located under "/wp-content/themes/themename/" on your Web server.
References
Resources
- Photo Credit Comstock Images/Comstock/Getty Images
