center with margin:auto – chrome/safari issue

[capricorn]

Hallo

I have a problem with this:

http://jsfiddle.net/UDc98/8/

Chrome, Safari: aside text column has no impact to the image
FireFox: image does not fall down when the browser window width is too small
IE8/9, Opera: works perfect

[Paulie_D]

I don’t understand what you want to have happen.

[capricorn]

If You dont understend, this img will help
http://www.imgupload.pl/images/75165497171705270829.jpg

[wolfcry911]

Its because you have given #fot an overflow: hidden; which changes its block formatting context. The rules for which aren’t as specific as you’d like and each engine has a different interpretation (in fact, I’d be willing to wager that IE is wrong).

You still haven’t given us enough information about what you would like to happen. Assuming you’d like the image to center between the left of wrapper and left edge of float, you could do something like this…

[Paulie_D]

I can’t get the image to center but: http://jsfiddle.net/Paulie_D/ASkQ3/3/

[Vermaas]

What do you think of this: http://jsfiddle.net/savver/UDc98/16/

[Paulie_D]

@Vermaas Unfortunately, that doesn’t solve the issue of having the image drop down when the width is insufficient. (see his comment against FF).

I like Wolfcry’s solution better than mine.

[Vermaas]

Hmm you mean like this: http://jsfiddle.net/savver/UDc98/18/

All the elements will stay on their position. Have checked Chrome, FF, IE (IE7 and IE9), Safari and Opera.

[Paulie_D]

@Vermaas I like that…it’s a more elegant solution provided he can implement the scaling.

[Vermaas]

@Paulie_D Indeed! It can be even more responsive with some nice little media queries.

[capricorn]

wolfcry911, Your solution fits perfectly to what I need.

Thanks a lot guys for your help

[Author]

Posts