jQuery toggle() breaks floating divs

Question

I've been searching for hours trying to fix this issue, but it doesn't seem like anyone else has had this problem.

I have two divs, one normal (and inline-block) on the left, and one floated nicely to the right of it. When I use .toggle() on them to hide/show, the floated one reappears below its original position. Even with all my other code stripped away, this problem persists:

//Html
<div class="tableWrapper">
    <div class="redDiv"></div>
    <div class="greenDiv"></div>
</div>

//Css stuff here:
.tableWrapper{width:100%}
.redDiv, .greenDiv{width:49%; height:150px;}
.redDiv{
    display:inline-block;
    background-color:red;
}
.greenDiv{
    float:right;
    background-color:green;
}

//My two measly jquery calls...
$(" .redDiv").toggle();
$(" .greenDiv").toggle();

Or here on JSFiddle: http://jsfiddle.net/0hxc8rr4/

Note: I tried swapping out "style.display = stuff" calls for the jQuery, and that didn't seem to help.

It is working fine for me. They both appear in the same place after toggling. — Michael Dziedzic, Feb 11 '15 at 23:05
@MichaelDziedzic What browser are you using? I'm currently on Chrome 40.0 — BlueMaegi, Feb 11 '15 at 23:08
Actually, I take that back. It works fine on Mac Safari and Firefox, but I get the problem with Chrome. — Michael Dziedzic, Feb 11 '15 at 23:08

score 3 · Accepted Answer · answered Feb 11 '15 at 23:06

jQuery will redefine the display property once you toggle. You can simply add float:left to the red block class and it should fix it. Or as mentioned, redefine it after each call. But if you're already floating one element, it'd make sense to float the other.

http://jsfiddle.net/0hxc8rr4/2/

score 1 · Answer 2 · edited May 23 '17 at 10:25

It is simple. jQuery shows the element using display:block which then needs a row instead of a cell.

You can manually toggle it yourself to inline-block

change slideToggle() behaviour to display:inline-block instead of display:block?

(jQuery) Toggle div style "display:none" to "display:inline"

In your case you should just use float:left on the first div.

http://jsfiddle.net/v1etme23/1/

.redDiv{
    display:inline-block;
    background-color:red;
    float:left;
}

score 0 · Answer 3 · answered Feb 11 '15 at 23:12

Only get the above problem on Mac Chrome (not Safari or Firefox). The below gets it to work on Chrome too;

.redDiv{
    position: relative;
    background-color:red;
    float: left;
}
.greenDiv{
    position: relative;
    background-color:green;
    float: right;
}

jQuery toggle() breaks floating divs

3 Answers3