Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nested DIV Overlapping Parent Div

    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.

  • #2
    New to the CF scene
    Join Date
    Aug 2007
    Location
    America
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Aug 2007
    Location
    America
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by solidarity; 08-10-2007 at 05:11 AM.

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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:

    Code:
    .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.

  • #6
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Solidarity...Thanks for all your help...removing that height attribute did the trick...You and GaryDarling were right.

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    De nada


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •