Top-Margin Not working Instead Height is increased

Question

I am trying to give top-margin to div with id=footer.but it is not working instead height get increased of outer div. HTML File:

<div id="lowestContainer">
    <div class="middle" id="footer">
        <address id="addressSFCM">
            xxxxx-xxxx-xxxxx-xxxx<br/>
            xx--xx--xx--xx<br/>
            xxx---xxx-x--x-xx-xx<br/>
            Email:xxxxx@hotmail.com
        </address>
    </div>
</div>

Css file:

#lowestContainer{
    background-color: rgba(18,19,20,1);
    height: 300px;
    z-index: 1000;
    box-shadow: 1px 0px 3px rgb(0,0,0,0.3);
}
#footer{
    width:1000px;
    height:100px;
    display:block;
}
#addressSFCM{
    color: rgba(76,76,76,1);
    max-width: 220px;
    height:auto;
    /*margin-top: 30px;*/
    display:inline;
}

Please help me over this problem;

Suresh Ponnukalai · Answer 1 · 2014-07-25T12:54:06.543

0

Update your footer class like below.

#footer{
width:1000px;
height:100px;
display:inline-block;
margin-top:100px;
text-align:center;
}

DEMO

edited Jul 25 '14 at 12:54

answered Jul 25 '14 at 12:42

Suresh Ponnukalai

13,820
5
34
54

after doing this the footer doesn't remains at center – EduardoSaverin Jul 25 '14 at 12:47
center?? didn't understand which one you are talking. – Suresh Ponnukalai Jul 25 '14 at 12:49
class=middle property contains `margin-left:auto;margin-right:` property. – EduardoSaverin Jul 25 '14 at 12:51
updated my answer. use `text-align:center` – Suresh Ponnukalai Jul 25 '14 at 12:54

score 0 · Answer 2 · answered Jul 25 '14 at 12:42

0

An alternative would be to add padding-top to the lowestContainer which yields the same result

See this fiddle

#lowestContainer{
    padding-top:30px;
}

answered Jul 25 '14 at 12:42

joegandy

320
1
5

ok but i need a reason why it is not working – EduardoSaverin Jul 25 '14 at 12:43
1

To my understanding, Margin does not effect the child's position in relation to it's parents, unless the parent has padding (my solution demonstrates this) Read more on the box model here: http://www.w3.org/TR/CSS2/box.html (See 8.3.1) – joegandy Jul 25 '14 at 12:46
but sometimes it works for elements that are floated left or right – EduardoSaverin Jul 25 '14 at 13:11

score 0 · Answer 3 · answered Jul 25 '14 at 13:10

0

Add overflow: hidden to wrapper

DEMO

#lowestContainer{
  overflow: hidden;
}
#footer{
    margin-top: 50px; // add top margin as per needed
}

answered Jul 25 '14 at 13:10

amol

1,535
9
10

thnxx it works!! but why can you please explain the reason – EduardoSaverin Jul 25 '14 at 13:14
When you trying to apply `top` `margin` to inner `div`, it actually working like applying top margin to parent `div` that is `#lowestContainer`. That's why when you going to apply margin to inner `div`, main wrapper `div` is shifted down. – amol Jul 25 '14 at 13:19
then how `overflow:hidden` is helping here – EduardoSaverin Jul 25 '14 at 13:21
and i have also seen that it sometimes works normally for child divs why it is so – EduardoSaverin Jul 25 '14 at 13:23
1

Though we know that after applying `overflow: hidden`, the content is `clipped`. So it allows here to apply `top margin` to inner `div`. After applying `overflow:hidden', the `top margin` is applied to `inner div' and the main wrapper is `clippped`. – amol Jul 25 '14 at 13:26

Top-Margin Not working Instead Height is increased

3 Answers3