Div Moves When I Put Text in It

DIV moves when I put text in it

Adding the text creates a baseline for the #parentwrap div, so the div gets aligned to that. Without the text, there's no baseline so the div takes a fallback layout mode.

To fix, set add #parentwrap { vertical-align:top; }

Div moves with all text -Css

Using inline-block, your div will position themselves so the last line of text inside each one of theme is on the same line. Use inline-flex for long texts.

Stop div from shifting down when text is added

I found the solution. By adding vertical-align: top; it moved the div back. don't know why it worked, but it did.

Adding text to div moves div downwards

Just set the vertical-align of the bar and the issue should be fixed.

Explanation: The issue happens when the vertical align is set to anything related to the baseline, so: baseline, sup, sub, length and percentage values, and the default value (baseline).

The values that fix this issue are: middle, top, bottom, text-top, text-bottom. You can choose from those, but you most likely only need the first three.

.wrapper {
  width: 100vw;
  height: 50vw;
  text-align: center;
}

.bar {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: red;
  display: inline-block;
  vertical-align: bottom;
}

<div class="wrapper">
  <div class="bar" style="height: 200px"></div>
  <div class="bar" style="height: 130px"></div>
  <div class="bar" style="height: 180px">some text</div>
  <div class="bar" style="height: 230px"></div>
  <div class="bar" style="height: 150px"></div>
  <div class="bar" style="height: 160px"></div>
  <div class="bar" style="height: 190px"></div>
</div>

Why does my div move down when I add paragraph?

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

CSS, divs moving around on content update

Just add flex rules for selector .gridd:

.gridd{
    ...
    display: flex;
    flex-flow: wrap;
}

And replace display: inline-block with flex: auto in the selector .gridd >div:

.gridd >div{
    ...  
    flex: auto;
}

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

var y = document.getElementsByTagName("H1");

y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;

*{margin: 0;
padding: 0;
}

body{
    background-color: #C2C2C2;
}

h1{
    font-family: Asap,sans-serif;
    font-size: 24pt;
    margin-top:35%;
    text-align: center;
    color: white;
}

.gridd{
    width: 340px;
    height: 340px; 
    background-color: #B4B4B4;
    border-radius: 15px; 
    padding: 15px; 
    position: absolute; 
    margin: auto;
    
    display: flex;
    flex-flow: wrap;
}

.gridd >div{
    width: 100px; 
    height: 100px; 
    background-color:#787878; 
    border-radius: 15px; 
    margin:5px;
    
    flex: auto;
}

.wrapper{
    position: absolute;
    margin: 80px 0 0 200px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2048</title>
</head>
<body>

<div class = "wrapper">
    <div class = "gridd" >
        <div> <H1></H1> </div>

        <div> <H1></H1> </div>

        <div> <H1></H1> </div>

        <div> <H1></H1> </div>

        <div> <H1></H1> </div>

        <div> <H1></H1> </div>

        <div> <H1></H1> </div>

        <div> <H1></H1> </div>

        <div> <H1></H1> </div>
        
    </div>  
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>

When adding a lot of text inside div- next element moves down

.slider {  min-width: 100%;  display: flex;  flex-wrap: wrap;  justify-content: center;}
.slider > ul {  padding-left: 0;  width: calc(100% - 160px);}
.slider ul {  flex-grow: 10;  min-height: 300px;  justify-content: center;}
.slider ul .slider-item {  min-height: 300px;  display: flex;  position: relative;}
.app {  padding: 20px;  width: 100%;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;  background-color: rgb(0, 0, 0);  overflow: hidden;  box-sizing: border-box;}.app img {  min-width: 500px;  height: 300px;  flex-grow: 3;}.app ul {  overflow: hidden;  display: flex;  flex-direction: column;  margin-left: 20px;  color: black;  width: 100%;  flex-grow: 3;  justify-content: center;  background-color: aqua;}
.app ul li {  flex-grow: 1;}
.right,.left {  padding: 20px;  flex-grow: 1;  position: relative;  display: flex;  justify-content: center;  align-items: center;  text-align: center;  transition: 0.3s;  position: relative;  min-width: 40px;  flex-wrap: nowrap;}
.left-arrow {  position: absolute;  left: 30px;  width: 20px;  height: 20px;  border-left: 2px solid rgb(163, 163, 163);  border-bottom: 2px solid rgb(163, 163, 163);  transform: rotate(45deg);  cursor: pointer;  transition: 0.3s;}
.right-arrow {  position: absolute;  right: 30px;  width: 20px;  height: 20px;  border-right: 2px solid rgb(163, 163, 163);  border-bottom: 2px solid rgb(163, 163, 163);  transform: rotate(-45deg);  cursor: pointer;  transition: 0.5s;}

<section id='portfolio'><h1>My Projects</h1>      <div class="slider">        <div class="left">          <span class="left-arrow"></span> </div>        <ul>           <li class="slider-item">            <div class="app">              <img src="./images/movies.jpg" alt="Sample Image">              <ul>                <li>Name: Movies WebApp</li>                <li>Description: Manage movise stock Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores obcaecati quaerat fugit nisi dolore optio possimus facere ratione, maiores dicta earum aut tempora unde facilis vitae vero, quas totam. </li>                <li>Backend: -</li>                <li>Frontend: Angular, CSS, Html</li>                <li>DB: -</li>
              </ul>          </li>                   </ul>        <div class="right"><span class="right-arrow"></span></div>        <ol class="pagination">        </ol>      </div>      </div>
    </section>

Why does this text move my div?

They are aligned at their baseline. If there is text, that's the baseline of the text (i.e. of the last line of text), if not, it's near the bottom of the container.

Add

.small {
  vertical-align: top;
}

to change this.

Here's a codepen: http://codepen.io/anon/pen/oxVajG

CSS div moves when i add text to it, even when using word-wrap

Remove float from .shopItem p and remove width from #shopTextContainer

* {  padding: 0px;  margin: 0px;}html {  min-width: 1630px;  width: 100%;  height: 100%;}#head {  margin-top: .5%;  width: 87%;  margin-left: 6.5%;  height: 120px;  background-color: rgb(241, 181, 0);}#head img {  margin-left: 15px;  margin-top: 10px;  width: 140px;  height: 90px;}#head h3 {  font-size: 36px;  margin-top: -4%;  margin-left: 45%;}#head p {  margin-left: 47.4%;  font-size: 18px;}#nav {  width: 87%;  word-wrap: break-word;  margin-left: 6.5%;  background-color: rgb(187, 187, 187);  float: left;}#nav ul {  display: flex;}#nav li {  padding-left: 45px;  padding-right: 45px;  list-style: none;}#nav a:hover {  background-color: rgb(205, 205, 205);}#nav a {  width: 1440px;  margin-left: 1em;  color: #000;  font-size: 1.8em;  text-decoration: none;}#nav-right {  margin-left: 25%;  float: right;}#content {  display: inline-block;  overflow: visible;  background-color: rgb(241, 181, 0);  width: 87%;  height: auto;  margin-left: 6.5%;}#gallery {  position: relative;  margin-top: 2%;  margin-left: 15%;  width: 69%;  height: 335px;  background-color: #131313;}#gallery img {  width: 100%;  height: 100%;}.galleryBTN {  cursor: pointer;  position: absolute;  margin-top: -21.4%;  text-align: center;  background-color: rgb(187, 187, 187);  width: 6%;  margin-left: 94%;  height: 150px;  text-decoration: none;}.galleryBTN ~ .galleryBTN {  margin-left: 0%;}.galleryBTN p {  color: #000;  text-decoration: none;  margin-top: 65px;}#webInfo {  min-height: 400px;  background-color: rgb(218, 166, 7);  float: left;  margin-top: 5%;  margin-left: 5%;  width: 50%;  height: 25%;  -moz-box-shadow: 0 0 5px #000;  -webkit-box-shadow: 0 0 5px #000;  box-shadow: 0 0 5px #000;}#webInfo p {  font-size: 18px;  margin-left: 1%;  overflow: hidden;}#addr {  min-height: 400px;  background-color: rgb(218, 166, 7);  overflow: hidden;  float: right;  margin-top: 5%;  margin-right: 2%;  width: 40%;  height: 25%;  -moz-box-shadow: 0 0 5px #000;  -webkit-box-shadow: 0 0 5px #000;  box-shadow: 0 0 5px #000;}#addr img {  width: 340px;  height: 320px;  margin-top: 5%;  margin-right: 5%;  float: right;}#addr p {  font-size: 32px;  text-align: right;  margin-right: 12px;  margin-top: 20%;  float: right;  margin-left: 4px;  font-size: 16;}#separator {  margin-top: 625px;  background-color: #000;  border: 1px solid #000;}.partner {  display: inline-block;  margin-top: 2%;  margin-left: 5.4%;  margin-right: 3%;  width: 180px;  height: 210px;}.partner img {  width: 180px;  height: 180px;}.partner p {  margin-top: 10px;  text-align: center;}.prices {  display: inline-block;  background-color: rgb(218, 166, 7);  margin-top: 3%;  margin-left: 5%;  width: 42%;  height: 125px;  -moz-box-shadow: 0 0 5px #000;  -webkit-box-shadow: 0 0 5px #000;  box-shadow: 0 0 5px #000;}.prices img {  float: left;  margin-top: 2%;  margin-left: 2%;  width: 90px;}.prices p {  float: right;  margin-right: 62%;  margin-top: 10px;}#shop {  margin-top: 2%;  margin-left: 5%;  background-color: rgb(218, 166, 7);  width: 90%;  min-height: 960px;  height: 100%;  overflow: hidden;  -moz-box-shadow: 0 0 5px #000;  -webkit-box-shadow: 0 0 5px #000;  box-shadow: 0 0 5px #000;}#shoppingCart {  margin-top: 30px;  display: inline-block;  margin-left: 87%;}#shoppingCart img {  float: right;  width: 55px;  height: 55px;}#shoppingCart p {  float: left;  margin-top: 20px;}.shopItem {  overflow: hidden;  display: inline-block;  background-color: rgb(218, 166, 7);  margin-top: 3%;  margin-left: 2.5%;  margin-right: 2.5%;  width: 27%;  height: 25%;  -moz-box-shadow: 0 0 5px #000;  -webkit-box-shadow: 0 0 5px #000;  box-shadow: 0 0 5px #000;}.shopItem img {  float: left;  margin-left: 3%;  margin-top: 3%;  width: 120px;  height: 140px;}.shopItem p {  word-wrap: break-word;  white-space: initial;  /*float: left;*/  margin-left: 7px;}#shopTextContainer {  /*width: 100%;*/  height: 82%;  overflow: hidden;}.shopItem a {  background-color: #FFF;  color: #000;  text-decoration: none;  margin-top: 1.2%;  padding: 7px;  margin-right: 36%;  float: right;}#pageNumber {  margin-top: 2%;  text-align: center;  width: 100%;  height: 40px;  font-size: 23px;}footer {  margin-top: 5px;  background-color: rgb(187, 187, 187);  text-align: center;  width: 87%;  font-size: 26px;  margin-left: 6.5%;  margin-bottom: .5%;  height: 35px;}

<html>
<head>  <title>Bigfoot bar - home</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" type="text/css" href="style/style.css">  <link rel="icon" href="img/logo.png" type="image/x-icon" /></head>
<body>  <div id="container">    <div id="head">      <img src="img/logo.png" />      <h3>Bigfoot bar</h3>      <p>Een slogan hier</p>    </div>    <div id="nav">      <ul>        <a href="index.php">          <li>Home</li>        </a>        <a href="prices.php">          <li>Prices</li>        </a>        <a href="shop.php">          <li>Shop</li>        </a>        <a href="agenda.php">          <li>Agenda</li>        </a>        <a href="team.php">          <li>Team</li>        </a>        <a href="slopes.php">          <li>Slopes</li>        </a>        <a href="login.php">          <li>Login/register</li>        </a>      </ul>    </div>    <div id="content">      <div id="shoppingCart">        <p>{Aantal artikelen}</p>        <img src="img/cart.png">
      </div>      <div id="shop">        <div class="shopItem">          <img src="img/shopitems/img1.png">          <p>Tekst over het winkel product asdasdadadasdadadadasdasdadadadadaasdasdasddadasdadadadasdadasdadasdasdasdadadadadadadasdasdadadadadadadasdadadadadadadasdaadsadsadadsdsadsadsaadsadsadsdasdasdasdsadsa</p>          <a href="?addItem=0">Add to cart</a>        </div>        <div class="shopItem">          <img src="img/shopitems/img1.png">          <div id="shopTextContainer">            <p>Tekst over het winkel product asdasdadadasdadadadasdasdadadadadaasdasdasddadasdadadadasdadasdadasdasdasdadadadadadadasdasdadadadadadadasdadadadadadadasdaadsadsadadsdsadsadsaadsadsadsdasdasdasdsadsa</p>          </div>          <a href="?addItem=1">Add to cart</a>        </div>        <div class="shopItem">          <img src="img/shopitems/img1.png">          <p>Tekst over het winkel product</p>          <a href="?addItem=2">Add to cart</a>        </div>        <div class="shopItem">          <img src="img/shopitems/img1.png">          <p>Tekst over het winkel product</p>          <a href="?addItem=3">Add to cart</a>        </div>        <div class="shopItem">          <img src="img/shopitems/img1.png">          <p>Tekst over het winkel product</p>          <a href="?addItem=4">Add to cart</a>        </div>        <div class="shopItem">          <img src="img/shopitems/img1.png">          <p>Tekst over het winkel product</p>          <a href="?addItem=5">Add to cart</a>        </div>        <div class="shopItem">          <img src="img/shopitems/img1.png">          <p>Tekst over het winkel product</p>          <a href="?addItem=6">Add to cart</a>        </div>        <div class="shopItem">          <img src="img/shopitems/img1.png">          <p>Tekst over het winkel product</p>          <a href="?addItem=7">Add to cart</a>        </div>        <div class="shopItem">          <img src="img/shopitems/img1.png">          <p>Tekst over het winkel product</p>          <a href="?addItem=8">Add to cart</a>        </div>      </div>      <div id="pageNumber">        <a href="?page=1">1</a>        <a href="?page=2">2</a>        <a href="?page=3">3</a> |        <a href="?page=999">999</a>      </div>    </div>    <footer>Een geweldig copyright bericht</footer></body>
</html>

Div Moves When I Put Text in It