CSS Float Left issue

HTML & CSS
1

Hey there,

Our client asked us to add social media icons to the right of their navigation and have the navigation be on the left side. Previously the icons were in a widget in the sidebar (wordpress site) and the nav aligned to the right. So I went ahead and made the change however in IE the navigation isn’t floating to the left. I’ve been messing around with it and I not sure what is missing or if something is wrong somewhere else. I didn’t originally create this site so I’m not sure if it is a mistake I made or not.

Any Ideas?

Here is the site in question…

Thanks,
Daniel

2

The list items are set to float:right. IE is actually rendering it properly. When you switch it to float:left, you’ll have to change the order of the menu items, since they had to be placed in reverse for the float:right, if that makes sense.

3

Yep it makes perfect sense. I didn’t notice the LI styles. Thanks!

4

If I’ve understood correctly now that things have been changed then IE would actually be wrong (as usual) :slight_smile: If the ul is floated left and the list items floated right the element should stay on the left. Older IE versions get this wrong and a right float inside a left float gets stretched incorrectly to 100% wide in error and the right float moves as far right as it can when it in fact should be shrunk wrap to the parent float. Apologies if that wasn’t the previous structure and ignore this post :slight_smile: