Hyrule Hyrule - 5 months ago 7
HTML Question

Why does my div move down when I add paragraph?

I'm trying to add a

<p>
to my
<div class="titleheader">
. So within my div as a child element like this:
<div class="titleheader"><p>generic text </p></div>
.

But when I try to add the
<p>
, my
<div class="titleheader">
doesn't stay at the same position and moves down. Why is this happening?

http://jsbin.com/yitazifivu/1/edit?html,css,output <-- jsbin.

Edit: Adding overflow hidden seems to do the trick (thx kameer), but why is it actually moving down without it..? I'm curious what just happened and trying to learn.



/* css bestand */

body {
margin: 0;
}

.container{
background-color: gainsboro;
width: 1000px;
height: 950px;
max-height: 950px;
margin: auto;
}

.blank1 {
background-color: white;
display: inline-block;
width: 9%;
height: 9%;
margin: 10px 30px 60px 65px;
}

.titleheader {
display: inline-block;
background-color: #3B3F40;
width: 65%;
height: 15%;
margin-bottom: 20px;
}

.content {
display: block;
background-color: gray;
width: 100%;
height: 33%;
}

.small-a {
background-color: white;
display: inline-block;
width: 14%;
height: 3%;
margin-left: 3%;
margin-top: 1%;
}

.small-b {
display: inline-block;
float: right;
background-color: white;
margin-top: 1%;
margin-right: 5%;
width: 12%;
height: 3%;
}

.main-area {
display: block;
background-color: gainsboro;
width: 100%;
height: 100%;
}

.straight-a {
float: left;
background-color: white;
margin: 0 10% 0 1%;
width: 5%;
height: 20%;
}

.main-area-content {
float: left;
background-color: white;
width: 70%;
height: 100%;
}

.straight-b {
float: left;
background-color: white;
width: 5%;
height: 20%;
margin-left: 8%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mert Porfolio</title>
<meta charset="utf-8"><link rel="stylesheet" href="main.css">
</head>

<body>
<div class="container">
<div class="blank1"></div>
<div class="titleheader"></div>

<div class="content">

</div>

<div class="small-a"></div>
<div class="small-b"></div>

<div class="balk-a"></div>
<div class="content-b"></div>

<div class="main-area">
<div class="straight-a"></div>
<div class="main-area-content"></div>
<div class="straight-b"></div>
</div>
</div>

</body>
</html>




Answer

The <p> tag has margins by default. So try resetting them:

p {margin: 0;}
.titleheader {overflow: hidden;}

Working Output: http://jsbin.com/zohapoyivi/1/edit?html,output

Comments