WordPress.org

1. PMConcepts
   Member
   Posted 1 year ago #
   

   Ok so I'm trying to get 3 columns in the footer to be centered and spaced evenly throughout the footer.

   http://dev.progressivemediaconcepts.com

   Below is the coding for the footer on the page (1st several lines):

   <div id="page_bottom">
   <div class="footer_resize">
   <div class="box_footer">
   <div class="box-col box_4">
   <h2>We <img class="alignleft size-full wp-image-1534" title="Heart" src="http://progressivemediaconcepts.files.wordpress.com/2011/10/heart.png" alt="progressive media concepts, social media marketing, social media management" width="16" height="16" /> Mommy Bloggers</h2>

   Below is the CSS for the footer:

   /* footer */
   #footer { color:#777; text-decoration:none; font:normal 11px "Liberation sans", Arial, Verdana, Helvetica, sans-serif; background:#cecece url(images/footer_bg.gif) top repeat-x;}
   #footer a { color:#777; font-weight: bolder; }
   #footer span { color:#777; }
   #footer .text2 { padding:20px; line-height:1.8em; }
   #footer .text1 { padding:20px; line-height:1.8em; }
   #page_bottom { background:#cecece url(images/page_bottom_bg.gif) repeat-x top; margin:0; }
   .footer_resize { float:center;width:950px; margin:0 auto; }
   /* box footer */
   .box_footer { padding:2px 0; }
   .box-col { width:250px; padding:0 3px ; float:left; color:#000000; font-size:11px; line-height:1.8em; }
   .box-col2 { padding:10px 0 0 5px; width:300px; float:left; color:#808080; font-size:13px; line-height:1.8em; }
   .box-col.box_2 { width:225px; color:#000000;}
   .box-col.box_4 { width:225px; color:#000000; padding: 0 20px 0 20px;}

   Help me please! Thanks in advance

2. pete_voce
   Member
   Posted 1 year ago #
   

   Is this what you're trying to achieve...
   http://dl.dropbox.com/u/9317490/screenshot.png

3. PMConcepts
   Member
   Posted 1 year ago #
   

   kinda. Just a little more evenly spaced out, keeping the "reader choice" text centered in that column . The 3 columns use .box-col.box_4 but i'm having difficulty spacing them out. But you were on the right track with that!

4. pete_voce
   Member
   Posted 1 year ago #
   

   Here's the styles I did with that and the code I redid to clean up the markup a little bit. I made it so the 3 columns are actually the same width, but unless they all have text filling them they don't have the appearance of equal widths. I put a style in there to center the Reader's Choice text, but commented it out so you could see where it is if you want it. It kind of looks a bit 'off' to me being truly centered but that's just my opinion. If you want, you could remove the text-align: center on it and instead do a padding-left declaration to fine-tune it.

   http://dl.dropbox.com/u/9317490/Archive.zip

5. MaverickAwesome
   Member
   Posted 1 year ago #
   

   Was this ever resolved? I am trying to do the same thing, can you please post the code you used and where you placed it?

   Thank you!

   -MavAwesome!

Topic Closed

This topic has been closed to new replies.