The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Container not stretching

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #27913

    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:

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


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

    Anyone got a solution?


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

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


    Thanks for the replies. I tried the overflow:hidden , but no result. So now I post the link towards the problem. 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 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.