Internet Explorer Float Issue?

[k_mcminn]

Hello, CSS-Tricks! I’m sure many here can agree that Internet Explorer (IE 9 in my case) , in general, is pretty difficult to work with when it comes to CSS.

I have, what appears to be, a float issue happening and I’m really not quite sure how to fix it. I’ve tried a variety of different properties/ values, but can’t seem to get it straightened out.

The link to the issue is:
http://www.nintendonerds.com/categories/wii-u/wii-u-gamepad-battery-replacement-is-easy-r678

The bottom portion under the share links, there’s a section called “Other Articles.” In IE9, it looks like this:
http://i.imgur.com/HdhD7.png

In all other Browsers, it looks perfectly fine, like this:
http://i.imgur.com/au6P8.jpg

Any help is getting IE9 to obey like the other Browsers would be greatly appreciated.

[Watson90]

Maybe try and remove the

position: relative;
top: 10;

And just add;

margin: 10px 5px 0 0;

[k_mcminn]

Thank you for the quick response, Watson90!

Unfortunately, that doesn’t seem to work.

[Image Link](http://i192.photobucket.com/albums/z133/nintendonerds/ie9_a.png “”)

This is what I have for the CSS:
.random_articles_image {
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 1px grey;
float: left;
height: 55px;
margin: 10px 5px 0 0;
/* margin-right: 5px; */
/* position: relative; */
/* top: 10px; */
width: 100px;
}

EDIT: I apologize for the code formatting above. I couldn’t get the proper formatting.

[Watson90]

Yeah, I did a quick Inpect Element on Firefox & Chrome

You also seem to have a

Is this necessary? Maybe this could be breaking your layout…

[k_mcminn]

Are you referring to this?

About the Author

[k_mcminn]

Are you referring to this?

About the Author

[k_mcminn]

Are you referring to this?

About the Author

[k_mcminn]

Man, I’m having a heck of a time with the formatting for this software, sorry about that.

[JoniGiuro]

I would place each image and description in a div and float those

[Watson90]

No, that is fine, it looks like there is an empty

tag under each

[k_mcminn]

So, six separate divs, with the same class?

[Watson90]

Maybe like a div with a class of box or something similar, make it a specific width and height and float it to the left, then on the inside float your image to the left and your description to the right and it should work fine…

[k_mcminn]

I removed that {br} you were talking about. I think it was unnecessary. I’ll try and do what you and Joni suggested.

[k_mcminn]

This is driving me wild, fellas. Could one of you perhaps, set something up for me to use?

[Watson90]

Maybe something like this? Obviously you’d need to change it to your code but you’ll get the general idea…

http://codepen.io/anon/pen/dKBAn

[Author]

Posts