jQuery and CSS float issues with Demo

I have a jQuery CSS float issue on the sidebar on the following page. The containing DIV does not expand when the content internal does. Thus we开发者_如何学编程 cannot determine the size of the DIV for use in another script.

On the following page, you will see a white line at the bottom of the sidebar. Click on option in the form in the centre and you will see the sidebar content expand. The whiteline however does not move.

http://www.divethegap.com/update/configure/adventure-training?qualification=Beginner&level=1

I've tried all combinations of display:block, overflow:visible and clear:both that I can think of and cannot get it working.

Any ideas?

Marvellous

---

The problem is that #sidebar1 has an explicit height set on it.

If you remove this explicit height, the "white line" (border) goes where you expect.

It's being set with JavaScript - you should find where in your scripts this height is being set, and get rid of it.

Alternatively, a dirty fix would be to run this:

$('#sidebar1').css('height', '');

to remove the explicit height, before you run the script you describe in this sentence:

Thus we cannot determine the size of the DIV for use in another script.

---

The problem is that your div id sidebar1 has a hard-coded height. The white line is the bottom border of that div- your content is overflowing the div and remaining visible without expanding it's container.

Remove that hard-coded height and all should be well in the world again. Very nice design, btw.