Nested DIV Overlapping Parent Div

[disenolopez]

website:
http://myspicefusion.com/sample/

css:
http://myspicefusion.com/sample/css/stylesheet.css

I have a nested .div that contains the site's main content, which in this case will be a menu that expands vertically. The parent div that it is contained within doesn't expand to adjust to the height of this menu...Instead it overlaps the boundary of container/parent div. I need the container div to grow with the div that is nested within.

If you need another example...this is also happening in another website I'm working on:
http://vvmconline.com/schlerotherapy.html

css:
http://vvmconline.com/css/stylesCosmeticCenter.css

...The right column where the pictures are displayed overlaps the parent/container div.

Maybe with these 2 examples you can see what I'm doing wrong missing.

It displays the same on latest versions of Safari, Firefox & IE (Windows & Mac)

Please help...Thanks.

[solidarity]

If I'm correct, the ".container" div is the one you want to expand. I notice that this div has a set height of 740px. If you remove the height attribute altogether or just set it to a higher number of pixels, it should solve the problem.

[disenolopez]

Hi thanks for your reply but that didn't work...I've tried setting the height to 100%, and also to auto but nothing...?? I'm stumped.

[solidarity]

What if you just set it to a height of 800 or so?

Edit: upon further examination, I think that taking away the height attribute might help, it just doesn't look like it because your image is too short for the content. Try giving the div a background color of white and taking away the height restriction.

[garydarling]

I'll take a stab at it before copying your code to a test page - Remove or adjust the height attributes for items nested within you container div. For example:

.sideBarRight {
	float: left;
	height: 400px;
	width: 170px;
	font-family: "Trebuchet MS", Garamond, "Times New Roman", serif;
	font-size: 11px;
	color: #C78D86;
	text-align: center;
	margin-top: 25px;
}

Set this to auto, or add overflow:scroll to see scrollbars for the content that exceeds your height boundary. Your container div may be calculating its height based on the attributes it calculates it needs for its nested items plus the ones you have defined.

[disenolopez]

Hi GaryDarling...Thank you so much for that tip ...It fixed my issue with vvmconline.com...I simply took away the height attribute and that did the trick...and I also added a display:block;...Don't know if that helped but once I saw it worked...I wasn't touching it...but I def know removing that heigh attribute was the issue...now to see if that is the issue with the spicefusion.com website...Again, a million thanks...If you figure out anything w/that other site please do tell...Thanks for all your help...I've been trying to figure that one out for months.

[disenolopez]

Solidarity...Thanks for all your help...removing that height attribute did the trick...You and GaryDarling were right.

[garydarling]

De nada