CODEWITHSUNDEEP
htmlcss
user2413519
user2413519

Reputation: 105

Child div influencing parent div?

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;



}

Upvotes: 0

Views: 100

Answers (4)

Arun
Arun

Reputation: 3077

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.

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32921

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.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

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.

Upvotes: 0

johnkavanagh
johnkavanagh

Reputation: 4674

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.

Upvotes: 2

Related Questions