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;
}

Dan · Accepted Answer · 2014-09-06 17:41:39Z

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

answered Sep 6, 2014 at 17:41

Dan

9,4885 gold badges44 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Lydon Over a year ago

And to build on what Dan said, you are using way too much html for what you are accomplishing. You can definitely remove a lot of it. And why are you using Clear where you are? Do you know of any clear fix tricks? If you add Micro clearfix to #main-content-area it will wrap any floated children. nicolasgallagher.com/micro-clearfix-hack

Juho Vepsäläinen · Accepted Answer · 2014-09-06 17:39:40Z

1

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

answered Sep 6, 2014 at 17:39

Juho Vepsäläinen

27k13 gold badges83 silver badges109 bronze badges

Comments

Pokechu22 · Accepted Answer · 2014-09-06 18:02:18Z

0

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

edited Sep 6, 2014 at 18:02

Pokechu22

5,0569 gold badges39 silver badges64 bronze badges

answered Sep 6, 2014 at 17:43

Ankit Aggarwal

13 bronze badges

Collectives™ on Stack Overflow

CSS positioning issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related