html - floating elements behavior

Question

I'm facing problem with floating elements inside div only , here is the problem:

.main{
    border-style:solid;
    border-color:yellow;
    overflow:auto;
}

.first {
    width:200px;
    height:100px;
    float: left;
    border: 10px solid green;
}
.second {
width:200px;
    height: 50px;
    border: 10px solid blue;
}

<div class="main">
<div class="first">test1</div>
<div class="second" >test2</div>
</div>

Answer 1

This is the logical behavior of how the elements should be painted but you are having an overflow issue combined with how float works that is making things strange.

Let's remove some properties and follow the code step by step. Let's start by removing overflow:auto from main and the fixed height from .second

.main {
  border-style: solid;
  border-color: yellow;
 /* overflow: auto;*/
}

.first {
  width: 200px;
  height: 100px;
  float: left;
  border: 10px solid green;
}

.second {
  width: 200px;
  /*height: 50px;*/
  border: 10px solid blue;
}

<div class="main">
  <div class="first">test1</div>
  <div class="second">test2</div>
</div>