I have always had this problem and I avoid floating div's because of this problem. The code seems to work but when you inspect the code in Google's developer tools it shows that the Main div is 0px tall. the problem I have with this is what if I want the Main div to have an image or a color. The solution I found to getting this to work is applying a float to every div so Main would also get a float but floating the Main div will break the centering of the main container. Does anyone know of a way to fix the two divs going outside of the main div?
.float-left {
float: left;
}
.float-right {
float: right;
}
main {
width: 100%;
height: auto;
background-color: darkgray;
}
.div1 {
height: 200px;
width: 50%;
background-color: darkgreen;
}
.div2 {
height: 200px;
width: 50%;
background-color: darkblue;
}<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet" type="text/css">
<main>
<div class="div1 float-left"></div>
<div class="div2 float-right"></div>
</main>
