Question

I’m making a little website using the jQuery “Slide” effect. I use it multiple times, on 3 div tags. I have one div tag triggering a another div tag to slide in/out. I want there to be one “Dynamic”(The one that moves) div tag and one “Static”(The one that triggers the dynamic) per “Line”. The problem I’m having, is that whenever the “Dynamic” one hides after the “Static” one is clicked, the next “Static” div tag moves up a line, making it look really bad. I’ll supply a JSFiddle at the end if I wasn’t clear enough. Click the thin div to make the fatter ones move.

The HTML:

<div class="tabs">
<div id="static1" class="static"></div>
<div id="dynamic1" class="dynamic"></div>
<br><div id="static2" class="static"></div>
<div id="dynamic2" class="dynamic"></div>
<br><div id="static3" class="static"></div>
<div id="dynamic3" class="dynamic"></div>
</div>

The JS:

$("#static1").click(function() {
    $("#dynamic1").toggle("slide", { direction: "right" }, 1000);
});
$("#static2").click(function() {
    $("#dynamic2").toggle("slide", { direction: "right" }, 1000);
});
$("#static3").click(function() {
    $("#dynamic3").toggle("slide", { direction: "right" }, 1000);
});

The CSS:

.dynamic {
overflow: hidden;
width: 100px;
height: 150px;
background: #ccc;
border-top:1px solid #000;
border-right:0px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}

.static {
width: 20px;
height: 150px;
background: #ccc;
border: 1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}

.tabs {
overflow: hidden;
float: right;
}

JSFiddle: http://jsfiddle.net/3T9je/

Answer 1

You need to 1) clear the left float on the .dynamic style and 2) clear the right float on the .static style like so:

.dynamic {
   ...
   clear:left;
}

.static {
   ...
   clear:right;
}

Demo: http://jsfiddle.net/3QfCf/2/show
Source: http://jsfiddle.net/3QfCf/2/

Can’t exactly explain why though. I tried clearing both on the static one but that caused layout issues.

EDIT: I also removed the unneeded <br> tags