float left + float right

by Boyanliuu

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="correct-ui">
            <header> header</header>
            <div class="clearfix wrapper">
                <div class="left">
                    Left 
                </div>
                                <div class="center">
                    responsive width Main content
                </div>
                <div class="right">
                    right 
                </div>

            </div>
            <footer> footer</footer>
        </div>

    </body>
</html>

CSS

:root {
    box-sizing: border-box;
}

*,
::before,
::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
.incorrect-ui{
  margin-top:300px;
}

.center{
  background:lightblue;
}

.left{
  background:gold;
}
.right{
  background:yellow;
}
footer , header{
  background:CornflowerBlue;
}

.wrapper{
  overflow:hidden;
}

.center,.left,.right{
  text-align:center;
  
}
.left,.right{
  width:100px;
}


.left{
  float:left;
}
.right{
  /* float:right; */
}