Grow your CSS skills. Land your dream job.

Container not stretching

  • # February 8, 2010 at 8:53 am

    I caused myself a problem when I decided to split up my content in a left (float:left) and right (float:right) container within the main container. This because of some pages will have content on the right, while others don’t.

    On the pages which I haven’t "split" (yet) the container works like before. The background is shown in the full container, while on the pages which I have split the container looks like having 0 pixels height.

    I already tried things like adding a position:absolute to the container, which helps but it will also overlays my footer. I also tried to give the container a value of min-height 100% height 100% auto !important, without success.

    I am sure the problem is caused because of adding two new containers, so I tried to give both containers the same background value, but then it only puts a background behinds the content but doesn’t fill it up totally. So I also tried to give the two containers the min-height 100% height 100% auto !important, also without success.

    At this moment I have no clue how to fix it.

    The CSS:

    Code:
    .page-wrap { width: 980px; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -150px; }
    .push { height: 150px; }
    #main { width: 980px; margin-top: 10px; border: solid #FF0 2px; background: url(style/images/mainbg.png); }
    #mainunder { width: 980px; height: 25px; float: left; background: url(style/images/mainunder.jpg); }
    #page-left { width: 475px; float: left; }
    #page-right { width: 475px; float: right; margin-right: 10px; }

    The HTML-structure:

    Code:
    CONTENT

    All floats are cleared by a clear in the footer file.

    Anyone got a solution?

    # February 8, 2010 at 10:39 am

    A live preview would have helped, by try adding the property "overflow:hidden" to the left and right columns

    # February 8, 2010 at 1:08 pm

    Having a clear on the footer won’t do anything.

    You’ll need to put a clearing div just before the #main div closes.

    # February 9, 2010 at 5:45 am

    Thanks for the replies. I tried the overflow:hidden , but no result. So now I post the link towards the problem.

    http://db.illogical.nl/ the main page, and About Me are already ‘split’ the other pages aren’t and look like they ‘should’. I added a temporary border arround the container so I am able to see it, since it nearly 1px on the problem pages.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".