Spacing Problem – 3 Column Template, Widget HTML Buttons

  • mcollinsblog

    (@mcollinsblog)


    12 years, 3 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.

    View post on imgur.com

    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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jarret

    (@jarretc)

    12 years, 3 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.

    Thread Starter mcollinsblog

    (@mcollinsblog)

    12 years, 3 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!

    Jarret

    (@jarretc)

    12 years, 3 months ago

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Spacing Problem – 3 Column Template, Widget HTML Buttons’ is closed to new replies.