0

I have, for some reason extra white space at the bottom of my div name 'profile-stuff'. I can't seem to figure out why it is there. What could I be doing wrong.

JSFIDDLE: http://jsfiddle.net/8kvwC/

My CSS:

#profile-stuff {
    margin: 0px 0px 20px 0px;
    height: auto;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.498039) 0px 6px 16px -9px;
    background-color: #fff;
}
4
  • 1
    Change top:-100px;margin-bottom:-100px to margin-top:-100px on #cover-wrap: jsfiddle.net/8kvwC/3 Commented Apr 10, 2013 at 3:22
  • @passerby that's an answer. Commented Apr 10, 2013 at 3:23
  • @JamesMontagne Because I saw that Adrift has already given an explanation... Commented Apr 10, 2013 at 3:25
  • @passerby Your solution was better, though his is now the same. Commented Apr 10, 2013 at 3:25

3 Answers 3

2

Alright, extending from comment:

Just as @Adrift has explained, position:relative elements still occupy the space they require, no matter how top/left/etc. offset they are assigned.

So to avoid this, change

#cover-wrap {
    top:-100px;
    margin-bottom:-100px;
}

to

#cover-wrap {
    margin-top:-100px;
}

http://jsfiddle.net/8kvwC/3/

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

Comments

2

In your #cover-wrap, change your position to absolute and change the top -100px to 50px.

Should fix your problem.

Comments

1

you can use that answer if u want the space for the bottom means you have to add

       div{
         float:left;
        margin-bottom:100px;
         }

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.