Take the 2-minute tour ×

I'm having a problem getting three items to float in Chrome. Basically, it's an image on the left, with two divs floated on the right. Problem is the rigght-floated dives are dropping down to the bottom of the image. Is this a known issue in Chrome and how can I fix it? Seems okay in IE, Opera, Safari & Firefox...

This is the code:

    <div id="container">
        <div id="header">
            <img src="image1.gif" width="320" alt="Logo"/>
            <div id="social">
                <img src="images/facebook_logo.png" alt="Facebook logo" width="25" />
                <img src="images/twitter.png" alt="Twitter logo" width="25" />

            <div id="review">
        <img src="roundel1.gif" alt="Click here!" style="float:left; width:50px;"/><div>
                    FREE service!

and the CSS:

* {

body    {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
#container           {
#header {
#header-image   {
/* flyout boxes */

#review {
#social {
share|improve this question
Can you provide a screenshot or a fiddle? –  Micah Henning Aug 9 '12 at 22:10
jsfiddle.net/Sc5K4 I was already playing with it. And it works in my chrome. –  FrankieTheKneeMan Aug 9 '12 at 22:11
Mmm, well that is indeed confusing. Back to the drawing board, maybe a cache error... Thanks both –  AliH Aug 9 '12 at 22:16
Both working for me as well. –  Xhynk Aug 9 '12 at 22:24
No, it's not that. Even using the exact same code is giving wild results. An example is at www.alihurworth.co.uk/wrl2/temp4.html –  AliH Aug 9 '12 at 22:34

2 Answers 2

For anyone finding this topic, i had the same problem on a complex responsive design where with two equal sized left-floated divs, the right div would be offset ~20 - 30px lower than the div on the right.

This seems to be a bug with Chrome, as the divs displayed as expected in every other browser (including IE9, IE8, & IE7).

The problem: top margin placed on the parent wrapper for these two divs

margin-top: 30px;

The Solution: Use padding instead, works in MSIE > 6, Opera, Chrome, FF, Safari

padding-top: 30px;

Hopefully this saves some of you some frustration and time, as this was pretty annoying.

share|improve this answer
Thanks, this really helped me. I couldn’t see why one of the floated columns on my site was starting ~40px further down than the one next to it, but it turns out it was the margins on the parent element. Changing them to paddings fixed the problem as you suggested. –  Dylan Parry Feb 27 '13 at 23:09
Indeed... Thanks. And I always thought that Chrome and Safari have the same engine. –  esp Mar 15 '13 at 19:22

I was able to reproduce your problem finally opening the developers tool in chrome and then looking in the css code of the review div and disabling the float rule and re-enabling it. Is this how you get the problem? If so then the solution might be floating the image to left. In my case it made the solution. If not, then if you provide an image it will be helpful. Thanks

share|improve this answer
Thanks. The header image is already floated left. It looks like this: alihurworth.co.uk/wrl2/images/screenshot01.jpg –  AliH Aug 9 '12 at 22:49
Sorry but i followed the url in the screenshot you provided above. And I'm in chrome 20.0.1096.1 but i'm seeing those three blocks are perfectly aligned. And there is an id of header-image bot it seems you didn't used it in your code.Can you please check? Now I was able to reproduce the problem by putting display:block rule in the image tag of the logo. As it occupied the whole width it pushed the other content below. –  maksbd19 Aug 9 '12 at 23:10
The wierd thing about this is that it seems intermittent. Every now and then it works, but refreshing the page brings it back. It is exactly as if the image was a block. The header-image tag is now gone. I'm using Chrome 21.0.1180.75 –  AliH Aug 9 '12 at 23:33

Your Answer


