The second floating div in chrome clears down before first div.

Question

Two divs are next to eachother, both floating left within a wrapper. In IE and firefox they appear correctly, but in Chrome, the 2nd floating div clears down below Div A. When I remove "float:left" in the css, it goes to the correct position in Chrome, but clears down in IE and firefox (as it should). I dont know why it is appearing this way in Chrome. Any ideas?

Answer 1

1. The HTML and CSS would be useful to answer this.

2. If you have just two divs and you want them to float next to one another, then set a width on each of them and float one left and float the other right. Remember to leave some space in between the two.

Answer 2

1. Without a code example this really is just guessing

2. I am not sure how Chrome works but I do know IE ads its own styles. Did you use a css reset? most cross browser issues can be fixed by this.

3. Sounds like the combined width of the 2 floating divs exceeds the width of the wrapper. Try setting the wrapper width to 100% or no width... or reducing the width of the two floating divs.

4. do you have any display: inline, block etc style properties set on any of those divs?

Answer 3

What about setting display:inline-block and the width for both divs?

EDIT: Setting a max-width of %50 for each one would work in all browsers except IE6, assuming there's no padding/margin set.

Answer 4

I've faced with the same problem. Chrome incorrectly displays divs with float. The block is displayed under the first. Not aside how I expected. Solition is simple! Surround both blocks with div that no any other sisterly blocks inside.

Answer 5

I had a problem where I had a container div with a bunch of inner divs that had the float:left property set. My last inner div (most right) also wrapped down. I fixed my problem by making sure that the combined inner divs with margins does not exceed the width of the container div.

Chrome's developer tool similar to firebug was great in helping me fix the problem. For my container div I did not explicitly set a width but chrome's developer tool could show me the inherited width. I then looked at all the widths of the inner divs combined and then adjusted some of the inner div's width.

Answer 6

I have the same problem. With firebug, I see that Chrome don't load the css specified in file loaded with jQuery, but I don't know how fix it.