Child div influencing parent div?

Question

What I am trying to do is give a div margin-top: 30px; But it seems to be moving the whole page 30px down, as opposed to only that div. It is like the child div is influencing the parent div?

Any suggestions?

Html:

   <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="BBcolForum.master.cs" Inherits="BBcolForum.BBcolForum" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/default.css" />    
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

<div id="content">
  <form id="form1" runat="server">

  <div class="header" style="margin-top:0px;">
  <h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
  </div>

    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">



        </asp:ContentPlaceHolder>
    </div>



    </form>
</div>


</body>
</html>

CSS;

body 
{
    background-image:url('/img/blue_back.png');
    background-repeat:repeat-x;

}

#content
{
    background-color:White;
    width: 800px;
    height:900px;
    margin: 0 auto 0 auto;   

}

.header
{
    border-bottom:1px solid #000000;
    height:100px;    
    color:Blue;



}

It's called *margin collapse*. – cimmanon Jun 03 '13 at 15:10 — cimmanon, Jun 03 '13 at 15:10

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

That's exactly what's happening, yes. A direct-child of an element with margin-top will also push the parent element. As a really easy/quick fix, have you considered using padding instead?

Failing that, you can use overflow: auto on the parent according to this previous discussion on the topic, and this one too.

edited May 23 '17 at 12:18

Community

1
1

answered Jun 03 '13 at 15:06

johnkavanagh

4,614
2
25
37

Ah ok, \nd no I am new to css so could you please provide me with an example of how padding works in this situation? – user2413519 Jun 03 '13 at 15:08
Ah never mind I have solved it using the padding you suggested thankyou +1 – user2413519 Jun 03 '13 at 15:09
@user2413519 if any answer was helpful and solved the problem you should accept it. – pzin Jun 03 '13 at 15:33

score 0 · Answer 2 · answered Jun 03 '13 at 15:08

0

Try adding padding:0.01px to the container. This will have no visual effect, but it will cause the margin to be applied in the right place.

answered Jun 03 '13 at 15:08

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 3 · answered Jun 03 '13 at 15:09

0

It's the margin on the <h1>. This always seemed counter intuitive to me. You can fix it by putting overflow: auto; on the container or changing the h1s margin to padding.

answered Jun 03 '13 at 15:09

Bill Criswell

32,161
7
75
66

score 0 · Answer 4 · answered Jun 03 '13 at 15:09

0

You must change

<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>

to

<h1 style="color:Aqua; padding-top:30px;">Student Forum</h1>

margin applies the space outside the object while padding applies it inside.

answered Jun 03 '13 at 15:09

Arun

3,036
3
35
57

Child div influencing parent div?

4 Answers4