Container not stretching

[Illogical]

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

CONTENT

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

Anyone got a solution?

[TheDoc]

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

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

[Illogical]

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.

[Author]

Posts