CODEWITHSUNDEEP
htmlcss
Jakob Nielsen
Jakob Nielsen

Reputation: 5198

div Element changes position (margin) of parent div

I have the following problem:

I have a div element with a background image which position is exactly like I want. But when I add a child div into it, it changes. (Theres a small margin at top)

I want to know why this is happening and how to fix it.

CSS Code:

body,html{
    height:100%;
}

body {
    margin: 0;
    background-color: green;
    background: url(../images/backround_red.png) no-repeat center center fixed;
    background-size: cover;
}

div#mainWrapper {
    position: relative;
    text-align: center;
    margin: auto;
    width: 70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
    padding-left: 4em;
}

div#loginWrapper {
    position: relative;
    top: 15%;
    margin: 0;
}

screenshots:

without the childdiv: enter image description here

with the childdiv: enter image description here

JSFiddle: http://jsfiddle.net/DUtb4/

Upvotes: 1

Views: 988

Answers (3)

user2021917
user2021917

Reputation:

You put this on top of css , that will help you .

* {
   margin  : 0;
   padding : 0;
}

this is here done changes on your content

Upvotes: 1

Andrea Ligios
Andrea Ligios

Reputation: 50203

You must override the default 16px of margin-top and margin-bottom of a <p> element.

Add this in your CSS

#loginWrapper > p {
    margin: 0;
}

Demo: http://jsfiddle.net/DUtb4/3/

Upvotes: 1

Thomas James
Thomas James

Reputation: 707

Try changing the mainWrapper to:

div#mainWrapper {
    position: relative;
    text-align: center;
    margin: 0 auto; /* Added a 0 to the beginning */
    width: 70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
    padding-left: 4em;
}

Also add padding: 0; to the body tag.

Upvotes: 0

Related Questions