CSS Help Featured Yaga Badges

PFAFF

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!

hgtonight

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

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?

hgtonight

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

PFAFF

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