CODEWITHSUNDEEP
css
MrKainig
MrKainig

Reputation: 143

Why are these elements outside of my wrapper?

The h1 and p should be inside of the white wrapper div, I don't understand why they are outside, can someone explain? Unfortunately I am not allowed to post pictures, but the h1 and p push themselves above the wrapper with white background... when I don't use tags, the text is suddenly inside of the wrapper

Html:

<!doctype html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
<p id='before-header'>This is the before header area</p>

<div id='wrapper'>
    <h1>Why is this outside of the white box?</h1>
    <p>and this as well?</p>
    but when I dont use tags... suddenly its insider, what magical stupid mistake am I doing?
</div>
</body>

This is the css:

*{
    margin: 0 auto;
    background-image: url('background.png');
}

#wrapper{
    margin: auto;
    width: 960px;
    height: 2000px;
    background: white;
}

#before-header{
    text-align: center;
}

Upvotes: 0

Views: 194

Answers (2)

anji
anji

Reputation: 344

http://jsfiddle.net/zj9v81t7/20/
Please try this css:

*{
    margin: 0 auto;
    background-image: url('background.png');
}
#wrapper h1 {
    float: left;
    margin: 5px auto;
    width: 100%;
}#wrapper > p {
    float: left;
}
#wrapper{
    margin: auto;
    width: 960px;
    height: auto;
    background: red; overflow: hidden;
}

#before-header{
    text-align: center;
}

Upvotes: 0

Pete
Pete

Reputation: 58422

It's because you are setting your background-image on everything so it makes it look as if the h1 is outside the white box where as in effect it is on top of the white box but with the background image so it appears as if it is outside the white box.

The star (*) selector in css is a blanket for everything so target what you want to have the background image specifically:

body {
    margin: 0 auto;
    background-image: url('background.png');
}

Example of background targeting everything

Example of background targeting body only

Upvotes: 1

Related Questions