How To Prevent Divs From Going Underneath Floated Divs

Hi everyone from StackOverflow ! How can I prevent divs from going underneath floated divs ? Screenshot As shown in the image above, my divs are automatically going underneath th

Solution 1:

Maybe it's time to use a better way to handle your layout. Here is a solution with flexbox:

body {
  margin: 019%0;
  padding: 0;
  background-color: rgb(249, 249, 249);
  display: flex;
  flex-direction: column;
}

.content {
  display: flex;
  align-items: flex-start;
}

#menu {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

div {
  margin: 1%;
  padding: 1%;
  box-shadow: -1px2px5px1pxrgba(0, 0, 0, 0.3);
  background-color: white;
  color: black;
  box-sizing: border-box;
}

<divid='header'><spanid='logo'>Info-Bulle</span><spanid='catch'>Club d'entraide informatique pour les séniors</span></div><sectionclass="content"><divid='menu'><ahref=''><imgsrc='https://lorempixel.com/50/50/'></a><ahref=''><imgsrc='https://lorempixel.com/40/50/'></a><ahref=''><imgsrc='https://lorempixel.com/50/50/'></a><ahref=''><imgsrc='https://lorempixel.com/50/40/'></a><ahref=''><imgsrc='https://lorempixel.com/50/50/'></a><ahref=''><imgsrc='https://lorempixel.com/50/70/'></a></div><divclass='p'>
    Bienvenue(s) sur le club d'entraide informatique pour s&eacute;niors appel&eacute; Info-Bulle !
    <br> Besoin d'aide ?
    <br> Envie d'apprendre l'informatique ? C'est &agrave; ca que sert Info-Bulle.
    <br> Si vous ne savez pas comment utiliser ce site, veuillez consulter le <ahref=''>manuel d'utilisation</a>.
  </div></section><divid='footer'>
  Mis en place par le CCAS de M&acirc;con et d&eacute;vellop&eacute; par Sanchez Tanguy.
  <br> Toutes les ic&ocirc;nes viennent de <ahref='https://www.flaticon.com/'>Flaticon.com</a>.
</div>