Title: Problem Using Float in Footer
Last modified: August 19, 2016

---

# Problem Using Float in Footer

 *  Resolved [Phenix](https://wordpress.org/support/users/phenix/)
 * (@phenix)
 * [17 years, 5 months ago](https://wordpress.org/support/topic/problem-using-float-in-footer/)
 * I’m am trying to display my recent posts, recent comments, and a little about
   me box in my footer with each being right next to the other. I am doing this 
   by using float:left and float:right. The information is displayed in the right
   position, but I can’t my footer background colour to show unless I take the float
   code out. Only then the information isn’t displayed properly. Any help would 
   be greatly appreciated.
 * My site is located at: [http://www.walkinginchrist.org/bohemianrefuge](http://www.walkinginchrist.org/bohemianrefuge)
   I’m using the lastest FF and WP 2.7
 * style.css
 *     ```
       /*
       Theme Name: Optimism
       Theme URI: http://www.freewpthemes.net/preview/optimism/
       Description: Widget ready and tested on WP 2.3.1
       Version: 2.0
       Author: Free WordPress Themes
       Author URI: http://www.freewpthemes.net/
       */
       body {
       	margin: 0;
       	padding: 0;
       	background: #FFFFFF url(images/bg_01.png);
       	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
       	font-size: 13px;
       	color: #837669;
       }
   
       h1, h2, h3 {
       	margin: 0;
       	font-family: Georgia, "Times New Roman", Times, serif;
       	font-weight: normal;
       	color: #6D5A46;
       }
   
       h1 { font-size: 44px; }
   
       h2 { font-size: 26px; }
   
       h3 { }
   
       p, ul, ol {
       	margin-top: 0;
       	line-height: 240%;
       	text-align: justify;
       	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
       	font-size: 11px;
       }
   
       ul, ol { }
   
       blockquote { }
   
       a { color: #D87EB4; }
   
       a:hover { text-decoration: none; }
   
       a img {
       	border: none;
       }
   
       img.left {
       	float: left;
       	margin: 7px 30px 0 0;
       }
   
       img.right {
       	float: right;
       	margin: 7px 0 0 30px;
       }
   
       hr { display: none; }
   
       .list1 {
       }
   
       .list1 li {
       	float: left;
       	line-height: normal;
       }
   
       .list1 li img {
       	margin: 0 30px 30px 0;
       }
   
       .list1 li.alt img {
       	margin-right: 0;
       }
   
       /* Header */
   
       #header-wrapper {
       	height: 74px;
       	background: url(images/img02.gif);
       }
   
       #header {
       	width: 1000px;
       	height: 74px;
       	margin: 0 auto;
       	background: url(images/img03.gif);
       }
   
       /* Menu */
   
       #menu {
       	float: left;
       	width: 680px;
       	height: 74px;
       	background: url(images/img04.gif) no-repeat;
       }
   
       #menu ul {
       	margin: 0;
       	padding: 33px 0 0 90px;
       	list-style: none;
       	line-height: normal;
       }
   
       #menu li {
       	display: block;
       	float: left;
       }
   
       #menu a {
       	display: block;
       	float: left;
       	margin-right: 17px;
       	padding: 5px 12px;
       	text-decoration: none;
       	font: 14px Georgia, "Times New Roman", Times, serif;
       	color: #658453;
       }
   
       #menu a:hover { text-decoration: underline; }
   
       #menu .current_page_item a {
       	background: #A2CE89 url(images/img06.gif) repeat-x;
       	color: #FFFFFF;
       }
   
       /* Search */
   
       #search {
       	float: right;
       	width: 305px;
       	height: 74px;
       	background: url(images/img05.gif) no-repeat right top;
       }
   
       #search form {
       	margin: 0;
       	padding: 36px 0 0 0;
       }
   
       #search fieldset {
       	margin: 0;
       	padding: 0;
       	border: none;
       }
   
       #search input {
       	float: left;
       	font: 12px Georgia, "Times New Roman", Times, serif;
       	border: none;
       }
   
       #search-text {
       	width: 135px;
       	height: 18px;
       	padding: 3px 0 0 5px;
       	background: #ECF9E4;
       	color: #658453;
       }
   
       #search-submit {
       	height: 21px;
       	margin-left: 12px;
       	background: #BE7BA2 url(images/img07.gif) repeat-x;
       	color: #FFFFFF;
       }
   
       /* Page */
   
       #page {
       	width: 800px;
       	margin: 0 auto;
       	padding: 0 45px;
       	background: #FFFFFF url(images/img08.gif) repeat-x;
       	border: 5px solid #FFFFFF;
       }
   
       /** LOGO */
   
       #logo {
       	height: 148px;
       	background: url(images/img09.gif) repeat-x left bottom;
       }
   
       #logo h1, #logo p {
       	float: left;
       	margin: 0;
       	padding: 0;
       	line-height: normal;
       }
   
       #logo h1 { padding-top: 45px; }
   
       #logo h1 a {
       	text-decoration: none;
       	color: #6D5A46;
       }
   
       #logo h1 a:hover { text-decoration: underline; }
   
       #logo p {
       	padding: 65px 0 0 15px;
       	font: italic 13px Georgia, "Times New Roman", Times, serif;
       	color: #B6ACA2;
       }
   
       #logo p a {
       	text-decoration: none;
       	color: #B6ACA2;
       }
   
       #logo p a:hover { text-decoration: underline; }
   
       /* Content */
   
       #content {
       	float: left;
       	width: 510px;
       }
   
       /* Post */
   
       .post {
       	margin-bottom: 25px;
       }
   
       .post .title {
       	margin-bottom: 3px;
       	padding: 2px 30px;
       	background: url(images/img10.gif) repeat-y;
       }
   
       .post .meta {
       	margin: 0 0 3px 0;
       	padding: 2px 30px;
       	background: url(images/img11.gif) repeat-y;
       	font: italic 13px Georgia, "Times New Roman", Times, serif;
       	color: #B6ACA2;
       }
   
       .post .meta a { color: #B6ACA2; }
   
       .post .entry {
       	padding: 25px 30px;
       	background: url(images/img12.gif) repeat-y;
       }
   
       .post .links {
       	margin: 0 250px 0 0;
       	padding: 0 0 0 10px;
       	background: #FEF7EF url(images/img13.gif) repeat-x;
       }
   
       .post .links .comments {
       	padding-left: 22px;
       	background: url(images/img14.gif) no-repeat left center;
       }
   
       .post .links .permalink {
       	padding-left: 17px;
       	background: url(images/img15.gif) no-repeat left center;
       }
   
       .post h2 a {
       	color: #6D5A46;
       	text-decoration: none;
       }
   
       .post h2 a:hover {
       	text-decoration: underline;
       }
   
       /* Sidebar */
   
       #sidebar {
       	float: right;
       	width: 240px;
       }
   
       #sidebar ul {
       	margin: 0;
       	padding: 0;
       	list-style: none;
       	line-height: normal;
       }
   
       #sidebar li {
       	margin-bottom: 30px;
       	padding: 0 0 20px 30px;
       	background: url(images/img12.gif) repeat-y;
       }
   
       #sidebar li ul {
       	line-height: 200%;
       }
   
       #sidebar li li {
       	margin: 0;
       	padding: 0;
       	background: url(images/spacer.gif);
       }
   
       #sidebar h2 {
       	margin: 0 0 20px -30px;
       	padding: 2px 0 2px 30px;
       	background: url(images/img10.gif) repeat-y;
       	border-bottom: 3px solid #FFFFFF;
       	font-size: 18px;
       }
   
       #sidebar p {
       	line-height: 200%;
       }
   
       /* Calendar */
   
       #calendar {
       }
   
       #calendar caption {
       	padding-bottom: 5px;
       	font-weight: bold;
       }
   
       #calendar table {
       	width: 100%;
       	border-collapse: collapse;
       	border-right: 1px solid #F5F2EF;
       }
   
       #calendar thead th {
       	padding: 5px 0;
       	text-align: center;
       	border-top: 1px solid #F5F2EF;
       	border-left: 1px solid #F5F2EF;
       	background: #F5F2EF;
       }
   
       #calendar tbody td {
       	padding: 5px 0;
       	text-align: center;
       	border-top: 1px solid #F5F2EF;
       	border-left: 1px solid #F5F2EF;
       }
   
       #calendar tfoot td {
       	padding: 5px;
       	background: #FEF7EF url(images/img13.gif) repeat-x;
       }
   
       #calendar tfoot #next {
       	text-align: right;
       }
   
       #calendar #today {
       	background: #E7F1E1;
       }
   
       /* footer area */
       #footer {
       	width: 800px;
       	background: #000000;
       	margin: 0px auto;
       	padding: 5px 12px 12px;
       	color:#999999;
       	clear: both;
   
       }
       #footer a, #footer a:visited {
       	color: #ffffff;
       }
       #footer h4 {
       	font: normal 146%/100% "Trebuchet MS", Tahoma, Arial;
       	color: #9cdbfb;
       	margin: 10px 0px 5px;
       }
       .footer-recent-comments {
       	width: 240px;
       	float: left;
       	margin-left: 10px;
       }
       .footer-recent-comments ul {
       	list-style: none;
       	margin: 0px;
       	padding: 0px;
       }
       .footer-recent-comments ul li {
       	background: #FFFFFF;
       	padding: 0px 0px 10px 20px;
       }
       .footer-recent-posts {
       	width: 240px;
       	float: left;
       	margin-left: 10px;
       }
       .footer-recent-posts strong {
       	font-size: 107%;
       	line-height: 135%;
       	font-weight: bold;
       }
       .footer-recent-posts ul {
       	list-style: none;
       	margin: 0px;
       	padding: 0px;
       	font-size: 92%;
       	line-height: 110%;
       }
       .footer-recent-posts ul li {
       	background: #FFFFFF;
       	padding: 0px 0px 10px 20px;
       }
       .footer-about {
       	width: 300px;
       	float: right;
       	padding-right: 10px;
       	padding-left: 10px;
       	background: #FFFFFF;
       }
       /* credits */
       #credits {
       	margin: 0px auto;
       	width: 800px;
       	color: #000000;
       	font-size: 85%;
       	line-height: 120%;
       	height:100px;
       	background: #FFFFFF;
       }
       #credits a, #credit a:visited {
       	color: #000000;
       }
       ```
   
 * footer.php
 *     ```
       <div id="footer">
         <!--recent comments start -->
         <div class="footer-recent-posts">
           <h4>Recent Posts</h4>
         	<?php query_posts('showposts=5'); ?>
       	<ul>
       	<?php while (have_posts()) : the_post(); ?>
       	<li>
       	<strong><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a></strong>
       	<small><?php the_time('m-d-Y') ?></small>
       	</li>
       	<?php endwhile;?>
       	</ul>
         </div>
         <!--recent comments start -->
   
         <!--recent comments start -->
         <div class="footer-recent-comments">
        <?php if (function_exists('src_simple_recent_comments')) { src_simple_recent_comments(); } ?>
         </div>
         <!--recent comments end -->
   
       	<!--about text start -->
       	<div class="footer-about">
       		<?php include (TEMPLATEPATH . '/text.txt'); /* Open about_text.txt in the theme folder to edit this text */?>
       	</div>
       	<!--about text end -->
   
         <hr class="clear" />
         </div><!--/footer -->
   
       </div><!--/page -->
   
       </body>
       </html>
       ```
   

The topic ‘Problem Using Float in Footer’ is closed to new replies.

 * 0 replies
 * 1 participant
 * Last reply from: [Phenix](https://wordpress.org/support/users/phenix/)
 * Last activity: [17 years, 5 months ago](https://wordpress.org/support/topic/problem-using-float-in-footer/)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics