pandaJuan pandaJuan - 4 days ago 4
CSS Question

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

I'm currently writing a layout for a 'shop' in css for an assignment for school, however when i try adding text to the shop text, it will move all the way down to the bottom of the div.



* {
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>





As you can see in this snippet, the div with the big amount of text will get put on the bottom of the div, this is not how it was supposed to be since i used a float to the right, i expected i could make the text automatically go to the next line.

Is there a reason why word-wrap doesn't work for this? And what would i use to get the text around the image instead (without things moving)

Answer

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>

Comments