stick div position as it is - html

Question

Hello i have a problem with my styling have two divs witch height is auto for both but the thing is when the first div (.filter) height is changed the second div (.posts) goes down as much as height was changed (.filter height +50 , .post down +50px):
my css :
.fp {
position: relative;
width: 1050px;
height: auto;
background-color: red;
left: 170px;
}
.filter {
background-color: white;
position: relative;
width: 250px;
min-height: 300px;
height: auto;
top: 20px;
border-radius: 4px;
border: 1px solid #1a171a;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
}
.posts {
background-color: white;
position: relative;
width: 750px;
height: auto;
float: right;
margin-top: -280px;
border-radius: 4px;
border: 1px solid #1a171a;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
}
html :
<div class="fp">
<div class="filter">
</div>
<div class="posts">
</div>
</div>

Answer 1

Always prefer display: inline-block instead float. Floating breaks the normal flow of elements. Also, negative margin isn't a good practice. The declarations position: relative or position: absolute should be used only on specific cases, not to align all blocks.
https://jsfiddle.net/alexndreazevedo/vg9bajrL/

Answer 2

Add float: left to .filter, erase the negative margin-top from .posts and add overflow: hidden to .fp to have the container really covering both elements.
After all the comments, I've set up a complete solution for you here: http://codepen.io/anon/pen/ZWNXEN
It adds margins where necessary or desireable, defines both elements as float (left/right) and lets the container cover the child elements (overflow: hidden). Apart from that I removed position: relative, which is of no use in this context.