Stick div Position wie es ist

Question

Hallo ich habe ein Problem mit meinem Styling haben zwei divs Hexe Höhe ist automatisch für beide, aber die Sache ist, wenn die erste div (.filter) Höhe geändert wird das zweite Div (.posts) geht nach unten so viel wie Höhe geändert wurde (.filter Höhe 50, .post unten + 50px):

mein 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

hinzufügenbis .filter, löschen Sie das negative margin-top von .posts und fügen Sie overflow: hidden zu .fp hinzu, damit der Container wirklich beide Elemente abdeckt.

Nachdem alle Kommentare, ich habe hier für Sie eine komplette Lösung ein: http://codepen.io/anon/pen/ZWNXEN

Es fügt margins wo notwendig oder wünschenswert, beide Elemente als float definiert (links/rechts) und lässt den Behälter der Deckel Kindelemente (overflow: hidden). Ansonsten habe ich position: relative entfernt, was in diesem Zusammenhang nicht sinnvoll ist.

Answer 2

Immer bevorzugen display: inline-block statt float. Floating bricht den normalen Fluss von Elementen. Negative Marge ist auch keine gute Praxis. Die Deklarationen position: relative oder position: absolute sollten nur in bestimmten Fällen verwendet werden, nicht um alle Blöcke auszurichten.

https://jsfiddle.net/alexndreazevedo/vg9bajrL/