yahoo5000 yahoo5000 - 6 months ago 11
HTML Question

stick div position as it is

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):
how its looks like

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

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.

Comments