CSS Box Not Expanding

[melvinlynch]

Hi,
I have tried all I know, and still can't get the css box to expand. The url is www.ebsrentals.com/bouncers1.html. If I scroll to one of the bottom calendars, and click on a date twice, the calendar will expand to fill out a form, when it does, it will extend beyond my content box (purple background). I want the purple background to stretch with the form.
Please help! If any additional info is needed, let me know.

Thanks
Mel

[kohoutek]

You'll need to contain the floats.

Add overflow:hidden and the wrapper will stretch according to its content's height.

#wrapper #content {
	width: 930px;
	margin-right: auto;
	margin-left: auto;
	background-image: none;
	background-repeat: repeat;
	border: thin solid #660033;
	margin-top: 10px;
	font-size: 16px;
	text-align: left;
	padding: 10px;
	height: 100%;
	background-color: #CCA1CC;
        overflow:hidden;
}

[melvinlynch]

Hi Kohoutek, thanks for the quick response, after adding the overflow:hidden, still didn't work. once i clicked twice on a calendar date, it would not allow me to scroll down the page event to click cancel on the form. You did mean #wrapper #content verses #wrapper, correct?

Thank you very much

[ralph.m]

Yes, unfortunately overflow: hidden won't help here because all that content is wrapped in divs set to position: absolute, which should never be used for the main parts of a page layout, because an absolute element is taken out of the flow, meaning that the other elements don't see it. Unfortunatlely, if you remove it now, a lots of things will fall out of place, but it would be worth redoing the layout so that it woks without positioning. Otherwise, you will keep being plagued with this problem.

The only alternative is to put a large height on the container to accommodate any expansion of the inner elements, but that's a poor solution, as it will look awful, and setting heights is dangerous, as some users will have their font sizes set large anyhow, meaning that content will spill out of the container anyway.

[melvinlynch]

Thanks Ralph,
I understand. I may as well bite the bullet and redesign that page. I hate when things don't work the way it should. Thanks for your feedback.

[ralph.m]

OK, good luck. Let us know if you need a hand.