SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Box Not Expanding

    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

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You'll need to contain the floats.

    Add overflow:hidden and the wrapper will stretch according to its content's height.
    Code:
    #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;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, good luck. Let us know if you need a hand.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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