CODEWITHSUNDEEP
htmlcss
yahoo5000
yahoo5000

Reputation: 458

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>

Upvotes: 2

Views: 59

Answers (2)

Johannes
Johannes

Reputation: 67748

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.

Upvotes: 1

alexndreazevedo
alexndreazevedo

Reputation: 381

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/

Upvotes: 2

Related Questions