CODEWITHSUNDEEP
htmlcss
devcoder
devcoder

Reputation: 1685

margin-top on an internal div is getting applied to an external div.

Here's a fiddle I setup illustrating the problem.

http://jsfiddle.net/rgfjL/13/

Here's the code

HTML

<div class="body">
    <div class="contact-form" class="clearfix">
        <p> asdsasadsad </p>
    </div>
<div>

CSS

div.body {
  display: block;
  height: 800px;
  width: 1024px;
  background: #474747;
}

div.contact-form {
  display: block;
  background-color:#F2F7F9;
  height: 600px;
  width:465px;
  padding:20px;
  margin: 250px auto;
  border: 6px solid #8FB5C1;
 -moz-border-radius:15px;
 -webkit-border-radius:15px;
  border-radius:15px;
}​

As you can see in the fiddle, the form div is flush against the top of the body div. Changing top margin on form pushes both of them down.

Upvotes: 0

Views: 330

Answers (4)

AdityaSaxena
AdityaSaxena

Reputation: 2157

This is how you'll have to make it work : http://jsfiddle.net/rgfjL/16/

<div class="body">
            <div class="contact-form" class="clearfix">
                <p> asdsasadsad </p>
    </div>
<div>

div.body {
    display: block;
    height: 800px;
    width: 1024px;
    background: #474747;
    padding-top:250px;
}


div.contact-form {
    display: block;
    background-color:#F2F7F9;
    height: 600px;
    width:465px;
    padding:20px;
    margin: 0 auto;
    border: 6px solid #8FB5C1;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Because this is Collapsing Margins

div.body {
    overflow: hidden;
 }

live demo http://jsfiddle.net/rgfjL/15/

more info http://reference.sitepoint.com/css/collapsingmargins

Upvotes: 2

brains911
brains911

Reputation: 1310

Using overflow:hidden; on div.body will cause div.contact-form to be cut off.

Instead of a margin-top on div.contact-form, add padding-top on div.body.

Upvotes: 0

RAN
RAN

Reputation: 1453

Apply overflow: hidden; to the class body.

Upvotes: 0

Related Questions