CODEWITHSUNDEEP
cssgoogle-chromecss-float
AliH
AliH

Reputation: 87

Floating div's in Chrome, appearing out of position

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:

    <body>
    <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>

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

and the CSS:

* {
  margin:0;
  padding:0;
}

body    {
    background-image:url(../images/greenbg.png);
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:120%;
    }
#container           {
    margin-left:auto; 
    margin-right:auto; 
    width:960px;
    background-color:#FFF;
}
#header {
    height:100px;
}
#header-image   {
    float:left;
}
/* flyout boxes */

#review {
    float:right;
    width:216px;
    border-style:solid;
    border-width:2px;
    height:63px;
    margin-right:20px;
}
#social {
    float:right;
    width:136px;
    border-style:solid;
    border-width:2px;
    height:48px;
    }

Upvotes: 3

Views: 7342

Answers (2)

BizLab
BizLab

Reputation: 161

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.

Upvotes: 10

maksbd19
maksbd19

Reputation: 3830

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

Upvotes: 2

Related Questions