J. Doe J. Doe - 1 month ago 8
CSS Question

CSS elements not wrapped properly

I've got these 2 CSS classes and they do not appear inside their container:



.container{
height: auto;
border: 1px solid red;
}
container::after{
content:"";
clear: both;
display: block;
}
.gauche{
float: left;
background-color: yellow;
height: 25px;
width: 50%;
}
.droite{
float:left;
width: 50%;
height: 25px;
background-color: blue;
}

<div class = 'container'>
<div class = 'gauche'></div>
<div class = 'droite'></div>
</div>





If they appear, the red border must wrap them, which thing isn't the case. Any suggestion on how to fix this?

jsBin

Answer

You need to clear the floats by using overflow: hidden for the parent.

.container{
  overflow: hidden;       /* Add this here. */
  height: auto;
  border: 1px solid red;
}
container::after{
  content:"";
  clear: both;
  display: block;
}
.gauche{
  float: left;
  background-color: yellow;
  height: 25px;
  width: 50%;
}
.droite{
  float:left;
  width: 50%;
  height: 25px;
  background-color: blue;
}
<div class = 'container'>
  <div class = 'gauche'></div>
  <div class = 'droite'></div>
</div>

Preview

preview