Problems with CSS positioning

Question

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

Change top:-100px;margin-bottom:-100px to margin-top:-100px on #cover-wrap: jsfiddle.net/8kvwC/3 — Passerby
– Passerby, Commented Apr 10, 2013 at 3:22
@JamesMontagne Because I saw that Adrift has already given an explanation... — Passerby
– Passerby, Commented Apr 10, 2013 at 3:25
@passerby Your solution was better, though his is now the same. — James Montagne
– James Montagne, Commented Apr 10, 2013 at 3:25

Passerby · Accepted Answer · 2013-04-10 03:29:35Z

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/

answered Apr 10, 2013 at 3:29

Passerby

10.1k2 gold badges37 silver badges53 bronze badges

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

Comments

vaultah · Accepted Answer · 2015-07-19 20:35:56Z

2

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

Should fix your problem.

edited Jul 19, 2015 at 20:35

vaultah

46.9k12 gold badges120 silver badges145 bronze badges

answered Apr 10, 2013 at 3:20

Steven

8321 gold badge8 silver badges28 bronze badges

Comments

manoranjani.a · Accepted Answer · 2013-04-10 04:46:38Z

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

answered Apr 10, 2013 at 4:46

manoranjani.a

451 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Problems with CSS positioning

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related