CODEWITHSUNDEEP
htmlcss
Tom Jardine-Smith
Tom Jardine-Smith

Reputation: 131

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

Upvotes: 1

Views: 77

Answers (1)

isherwood
isherwood

Reputation: 61114

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>

Upvotes: 1

Related Questions