CSS positioning issue

Question

I'm having a problem with my CSS where I have a massive amount of white space which I'm not wanting. All I want is the content area containers to fix to the page size, though for the life of me I can't find what I have done to cause this problem.

Here is a link to my problem:

http://jsfiddle.net/k5t5czxt/1/

CSS for main content:

#main-body-area {
    background-size:cover;
    background:url(../Images/BluePrint.jpg) no-repeat;
    background-position:left;
    position:absolute;
}

#main-body-cover {
    background-color:pink;
    opacity: 0.75;
    position: absolute;
    height: 100%
}

#main-body-wrapper {
    width: 60%;
    background-color: yellow;
    margin: 0px auto;
    opacity: 0.75;
    border-radius: 20px;
    height: 95%;
}

#main-section {
    margin: 2%;
}


article {
    background-color:orange;
    border: 1px solid green;
    margin: 2%;
    height: 500px;
    width: 90%;
    display: inline-block;
}

Answer 1

Just change CSS for the article.

article {
    background-color:orange;
    border: 1px solid green;
    margin: 2%;
    height: 100%;
    width: 90%;
    display: inline-block;
}

Here, height is changed from 500px to 100%.

JS Fiddle

Answer 2

Your extra <div class="Clear" /> and <div class="Clear"></div> are creating the extra white space.

Remove those and the white space will be gone, almost completely. There is still some white space remaining because the overall height of the page is 500px which is a result of your height: 100% element. Removing the height:100% will remove the additional white space but also adversely impact other parts of the page.

Since there is a lot going on with your CSS I would potentially recommend starting over with this page and rebuilding it one element at a time to see how each element and class impacts your layout.

JS Fiddle Demo

Answer 3

The extra white space is caused by your .Clear element. div height: 100% gets applied to that.