css3 - responsiv css, element flows in to each other -

i'm trying build responsiv webpage , works on small screen 640px , on bigger screens. there 2 elements next each other. problem between breakpoint 640 px , bigger screens. until you've stretched out bigger screen 2 elements floats in each other. between maybe 640 px , 800 px..

here's css 2 elemets placed next each other.

@media screen , (min-width: 640px) {  article {     max-width: 75%;     position: absolute;     margin-right: 2em; }  aside {     float: right;     display: inline;     max-width: 20%;      } 

how can them not float in each other?

your position: absolute creating problem. not sure why need it.

are looking below

html:

<div class="left"></div> <div class="right"></div> 

css:

.left, .right {     float: left;     border: 1px solid red;     height: 200px;     box-sizing: border-box; } .left {     width: 70%; } .right {     width: 30%; }