Width of parent container of floating elements in safari

Question

I have a problem with a div width containing 2 floating elements in safari.

One of the floating divs has a width of 0 and expands with jquery in the click event. The parent container in safari keeps the width of both divs, even if the width is set to 0.

Here is an example of this, working on everything except Safari. http://jsfiddle.net/XUR7R/6/

HTML:

<div class="item-list"> <ul> <li class="article"> <div class="column"> Column 1<br/> <a href="#" class="expand">toggle</a><br/> </div> <div class="column expandableColumn"> Column 2 content </div> </li> </ul> </div> 

CSS

 .item-list{ overflow:hidden; } .article{ float:left; overflow:hidden; background:#555; padding:5px; } .column{ float:left; height:100px; width:100px; background:red; } .expandableColumn{ width:0; }​ 

Javascript

 $(document).ready(function() { $('.expand').click(function() { if ($(this).hasClass('.expanded')) { $('.expandableColumn').animate({ 'width': '0px' }); } else { $('.expandableColumn').animate({ 'width': '100px' }); } $(this).toggleClass('.expanded') }); });​ 

Answer 1

I do not know if this is what you are going to do, but visually it works.

HTML

 <div class="item-list"> <ul> <li class="article"> <div class="column"> Column 1<br/> <a href="#" class="expand">toggle</a><br/> </div> <div class="column expandableColumn"> <p>Column 2 content</p> </div> </li> </ul> </div>​ 

Js

 $(document).ready(function() { $('.expandableColumn p').hide(); $('.expand').click(function() { if ($(this).hasClass('.expanded')) { $('.expandableColumn').animate({ 'width': '0px' }); $('.expandableColumn p').hide(); } else { $('.expandableColumn').animate({ 'width': '100px' }); $('.expandableColumn p').show(); } $(this).toggleClass('.expanded') }) });​ 

I wrapped the text of column 2 with <p> , then added hide () and show () (you could switch or something else that was done quickly) to shoot when you change the width of another div.

It seems you need to work the way you need in Safari.

Here's the fiddle .

Answer 2

I managed to get it to work by expanding and collapsing the li shell at the same time:

 $(document).ready(function() { $('.expand').click(function() { if ($(this).hasClass('.expanded')) { $('.article').animate({ 'width': '100px' }); $('.expandableColumn').animate({ 'width': '0px' }); } else { $('.article').animate({ 'width': '200px' }); $('.expandableColumn').animate({ 'width': '100px' }); } $(this).toggleClass('.expanded') }) 

});

here is the fiddle http://jsfiddle.net/AnjXH/