Tom Jardine-Smith Tom Jardine-Smith - 3 months ago 7
CSS Question

Margin having an affect on unrelated div

I've hit a wall here...

I have a title that I want to align centrally on the page. I've done this by using

#landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;
.

The title is wrapped in a div that is, in turn, sitting inside a full-screen div.

I then wanted to increase the title div's top margin to bring the title down. Simple, yes?

Except when I add in
margin: 50px
into the style for the div containing the title, the full-screen div moves down with it.

Even more annoyingly, when I try to do exactly the same thing with divs further down the page, everything works fine.

Why is this happening? See code and screen shots for context.



body {
margin: 0;
padding: 0;
}

#landingArea {
width: 100vw;
height: 100vh;
background-color: #6fc9ff;
}

#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;

}#belowFold {
width: 100%;
height: 100%;
background-color: white;
}

#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}

h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}

<!DOCTYPE html>
<html>
<head>
<title>Becky's Pet Services</title>
<link rel="stylesheet" type="text/css" href="bps2CSS.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Raleway" rel="stylesheet">
</head>
<body>

<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>

<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>


</body>
</html>





enter image description here
enter image description here

P.S. The garish colours are only there for visibility of the divs. :D

Answer

You have to force parent elements to contain their children (or their childrens' margins) in some cases:

#landingArea {
    ...
    overflow: hidden; /* or auto */
}

html,
body {
    margin: 0;
    padding: 0;
}

#landingArea {
    height: 100vh;
    overflow: hidden;
    background-color: #6fc9ff;
}

#landingAreaContent {
    position: relative;
    margin: auto;
    text-align: center;
    background-color: blue;
    margin-top: 50px;
}

#belowFold {
    width: 100%;
    height: 100%;
    background-color: white;
}

#belowFoldContent {
    position: relative;
    margin: auto;
    margin-top: 50px;
    text-align: center;
}

h1 {
    margin: 0;
    padding: 0;
    font-family: 'Dancing Script', cursive;
    font-size: 60px;
}
<div id="landingArea">
    <div id="landingAreaContent">
        <img id="langingAreaLogo" src="">
        <h1>Becky's Pet Services</h1>
    </div>
</div>

<div id="belowFold">
    <div id="belowFoldContent">
        <h1>Welcome!</h1>
        <p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
    </div>

Comments