Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
Please upgrade here. These earlier versions are no longer being updated and have security issues.

CSS Help Featured Yaga Badges

I'm trying to display the featured badges side-by-side in this list instead of in a single column.

I've tried:

ul.Yaga.FeaturedBadges { float: left; }

Using display: inline, float: left and a combination. I can get the badges to shift left, but they overlap the editor below and still don't display side-by-side.

Any help would be greatly appreciated!

Comments

  • hgtonighthgtonight ∞ · New Moderator

    Use diplay: inline-block; and specify a width that is less than a third of the parent container.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    PFAFF
  • @hgtonight that seems to solve the overlap issue, but the three badges are still in a single column and width just seems to change the space between the left and where the column is.

    Thoughts?

  • hgtonighthgtonight ∞ · New Moderator

    You will need to specify the width of the containing ul. Remove the float on the li elements as well.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    unixhero
  • Thanks! I'll see if I can figure it out from here.

Sign In or Register to comment.