Problems with CSS float, works in IE, doesn't work in Chrome / FF .. I probably have something wrong

Question

I'm not very good at CSS ... and I don’t yet know all the basic quirks. Maybe someone can help me. I installed an image showing my code, a diagram of my DIVs and examples of how it looks in IE compared to Chrome / FF

Can someone direct me on the right path?

Fiddle : http://jsfiddle.net/PhilippeVay/BuuuW/2/

It works fine in IE, but in Chrome and FF one of the images speeds up its container, and the “content block”, as I call it, is located under the image, which should be next to it. Each of the components has a css class, despite my diagram saying that there is no css. Currently, there is only some basic style for this (indentation, text indentation, etc.).

thanks

Answer 1

Adding overflow: hidden to the container will not allow the left side to continue under the image on the right:

 .cb { overflow: hidden; } 

This will create a new block formatting format, and I won’t explain it to you, because others did it better than I could: http://colinaarts.com/articles/the-magic-of-overflow-hidden/

EDIT: did not see that person.jpg was outside his parent on the left: see another answer for the clearfix method :)

Answer 2

use clearfix hack for .cbContent (enable clearfix css and add .clearfix class) so that the window expands to fit the image on the left.

Edit: Also, make sure that arent giving the same div a fixed width (i.e. 500px) and padding. This can lead to different browsers behaving differently because of how they interpret the box model. For more information about this, and a great solution for this, read the Paul Ireland blog: http://paulirish.com/2012/box-sizing-border-box-ftw/