WordPress.org

1. mcollinsblog
   Member
   Posted 5 months ago #

   Hey folks,

   Trying to add some buttons to the bottom of my page. I'd like there to be six evenly spaced buttons across the footer.

   Right now, the sizing of the widgets is off, and I don't quite know enough CSS to fix it.

   Here's what it looks like now. Notice the bad spacing between 2nd-3rd buttons, 4th-5th buttons, and difference between the last button and the edge compared to the first.

   http://i.imgur.com/cylO8.png

   Any ideas how to get some even spacing? Here's the CSS code for the footer. I noticed the widgets are different sizes (255px for two, 260px for one), did some tinkering and still couldn't get it all to work:

   [CSS code moderated - please post a link to your site]

   Here's the code I'm using for widget HTML buttons:

   <img src="http://placehold.it/90x90" align="left" hspace="10" vspace="20">
   <img src="http://placehold.it/90x90" hspace="25" vspace="20">

   Any help would be greatly appreciated. I'm a programming newb, so I'm guessing this is an easy fix... just can't quite get my head wrapped around it! Thanks.
   -Mike

2. Jarret Cade
   Member
   Posted 5 months ago #

   You would want to float: left; each widget with CSS and then apply the appropriate margin to get them to all even out.

   So say your page width is 1000px wide and you want 6 widgets going across at 100px wide each.

   So you'll have 600px used up by widgets and 400px left as spacing. You'll have 7 "spaces" to separate out each widget.

   400/7=57.142 so round off to 57

   So you would want a left-margin on each width of 57px.

   .widget-holder {
        width: 1000px;
   }
   
   .widget {
        width: 100px;
        float: left;
        margin-left: 57px;
   }

   Something like that, make sense? This may or may not work perfectly across all browsers and you might have to adjust values accordingly.

3. mcollinsblog
   Member
   Posted 4 months ago #

   Hey Jarret,

   Yes, that does make sense.

   For my site, I'm trying to fit six evenly spaced buttons into 3 widgets.

   I didn't read the rules before posting my CSS code, so here it is at PasteBin.

   http://pastebin.com/BwrzN0FP

   I can grasp the concept of spacing out the widgets, but when it comes to inserting the buttons with HTML (code in the original post), things start getting messed up.

   Thanks for the tip!

4. Jarret Cade
   Member
   Posted 4 months ago #

   Are you using your own custom widget that you created or just something like the text widget that is provided by WordPress?

Reply

You must log in to post.