1

I am trying to do a website. Therefore I got a footer and a div-container with images over which you can hover, to see an overlay. My problem is, that the footer acts like the div-container would be his child, even if it is not the case. I want the footer to be under the container not being all around. Shouldn't divs be display one under the other? Heres the Codepen: https://codepen.io/LeoGries/pen/xxVOXEo

HTML-Code:

<div class="containerBigOverview">
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World</div>
          </div>
        </div>
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World 2</div>
          </div>
        </div>
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World 3</div>
          </div>
        </div>
    </div>

<footer>
    <a href="impressum.html"> Impressum </a>
    <a href="datenschutz.html"> Datenschutz </a>
</footer>

CSS-Code:

.containerBigOverview{
    margin: 3%;
    padding-bottom: 0;
    background-color:red;
}
.containerOverview {
  position: relative;
  width: 31%;
  margin: 1%;
  float: left;
}

@media screen and (max-width: 600px) {
    .containerOverview {
      position: relative;
      width: 100%;
      width: 100%;
      margin: 3%;
      float: none;
    }
}
.svg {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(176, 224, 230, 0.9);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.containerOverview:hover .overlay {
  height: 50%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* FOOTER */

footer {
    width:100%;
    background-color: #aaa;
    color: white;
    padding: 2%;
}

footer a{
    text-decoration: none;
    color:white;
    padding: 1%;
}

enter image description here

Thanks for help!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Leo Ge
  • 31
  • 2
  • `float` takes elements out of the normal flow, they do not influence the height of their parent any more - unless you _clear_ the floating. https://css-tricks.com/all-about-floats/, https://teamtreehouse.com/library/clearing-and-containing-floats, etc. pp. Plenty of explanation of those _basics_ to be found on the net. – CBroe Aug 18 '20 at 11:42

2 Answers2

2

This is happening because you have used the float left on inner divs, whenever you use the float on the child, and if you do not clear it or used overflow: hidden on its parent, the inner items will not take the height,

just use overflow hidden on the parent or clear the float,

I would suggest you to use Display flex on parent and not float on child.

Here is the pen.

 .containerBigOverview{
   margin: 3%;
   padding-bottom: 0;
   overflow: hidden;
   background-color:red;
}


.containerBigOverview{
    margin: 3%;
    padding-bottom: 0;
  overflow: hidden;
    background-color:red;
}
.containerOverview {
  position: relative;
  width: 31%;
  margin: 1%;
  float: left;
}

@media screen and (max-width: 500px) {
    .containerOverview {
      position: relative;
      width: 100%;
      width: 100%;
      margin: 3%;
      float: none;
    }
}
.svg {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(176, 224, 230, 0.9);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.containerOverview:hover .overlay {
  height: 50%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* FOOTER */

footer {
    width:100%;
    background-color: #aaa;
    color: white;
    padding: 2%;
}

footer a{
    text-decoration: none;
    color:white;
    padding: 1%;
}
<div class="containerBigOverview">
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World</div>
          </div>
        </div>
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World 2</div>
          </div>
        </div>
        <div class="containerOverview">
          <svg width="10em" height="1oem" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
          <div class="overlay">
            <div class="text">Hello World 3</div>
          </div>
        </div>
    </div>

<footer>
    <a href="impressum.html"> Impressum </a>
    <a href="datenschutz.html"> Datenschutz </a>
</footer>
Atul Rajput
  • 4,073
  • 2
  • 12
  • 24
1

Instead of floating your 3 divs (.containerOverview) use display: inline-block;.

Voila

Float takes elements out of the flow (similar but not the same as postion: absolute), which means they have no effect on their parent, so parent's height is 0.

Ivana Bakija
  • 334
  • 2
  • 10