The second floating div in chrome clears down before first div

StackOverflow https://stackoverflow.com/questions/1013027

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?

Was it helpful?

Solution

  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.

OTHER TIPS

in my case i use display:inline-table for the parent element of the floated elements.. Even if it is not a table.

I used the display:inline-table in order to fix the bug that google chrome had encountered..

I've same issue in Chrome and I solve it by giving display:inline-table to parent div

The solution is simple - just add the div which contains all these divs an attribute: display: table; - it should solve the problem.

I had multiple css float left divs with text links inside and the container was over lapping on the right of each. The fix was to remove space in the link display text. eg. ...> TEXT </a> to ...>TEXT</a>

You must give 1 div the height

For example

Div 1 

.oneColFixCtrHdr #mainContent {
    background: #FFFFFF;
    width: 375px;
    height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
    position: relative;
    display: block;
    float: left;
    padding-left: 10px;
    margin-bottom: 20px;
    padding-bottom: 0px;
    padding-top: 20px;
}

Div 2

.oneColFixCtrHdr #maincontent2 {
    background: #FFFFFF;
    width: 390px;
    height: auto;
    position: relative;
    display: inline-block;
    float: right;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    padding-bottom: 0px;
    padding-top: 20px;
    padding-left: 20px;
    border-left-style: groove;

In Chrome - Seems this issue has something to do with display attribute of parent element. I had same issue and did lot of search. Finally i got it fixed by removing display CSS attribute of parent TD tag. I also obsorved one wiered thing. When i had display:block; for parent a TD table element, in Chrome, colspan was not working (in IE it was working fine). I scratched my lots of hairs finding this problem.

I faced the same problem with Div and its Children Span both had float right, to solve i just added display inline to the Div parent and now it works fine in Chrome and Safari both.

I wrapped everything in <div style="display:inline;"> ... code .. </div> and solved the problem.

  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?

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.

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.

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.

also similar issue with floating child div's. In my case .. I was floating a surrounding div to right, that contained h3 element (with text-align property) - followed by 2 child block elements.

Intent center h3 text, in relation to child block elements below it.

-

Problem? I did not have a set width for block child elements.. Why? I wanted the width to hold distinct padding on left / right relative to text amount in that container. eg. padding:10px 30px;

Solution I resorted to setting a width to surrounding and child divs, also center aligning text on child divs to give similar results of first case attempt.

I experienced the same problem. I had two divs with float: left inside a table td -- I had to set the table td style to include style="text-align: left;" for them to correctly align.

I'm no HTML hero so in my case the problem was really silly.

It was just a syntax error so be sure you check all your syntax before you start pulling your hair out like I did.

And SAFARI was completely ignoring it and displaying the divs correctly floated so I got really confused.

BASICALLY it was an unclosed div tag that was creating the problem :

<div class="seperator" </div>    instead of    <div class="seperator"> </div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top