Hinzufügen von Inhalt zu Div bewirkt, dass es sich verschiebt?

Question

Im folgenden Code habe ich eine einfache Seite Setup, aber sobald ich etwas zu der div mit Klasse page hinzufügen die gesamte Hauptseite div verschiebt nach unten?

versuchen, <h1>hello</h1> zu div mit Klasse page hinzuzufügen.

was ist das Problem, das div sollte dort bleiben und einfach <h1>hello</h1> sollte hinzugefügt werden!

Code: https://jsfiddle.net/5sx0sj2q/

.container{ 
 
    width: 100%; 
 
    background-color: #d5d5d5; 
 
} 
 
.sidebarcontainer{ 
 
    width: 300PX; 
 
    height: 2000px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    padding-right: 2px; 
 
} 
 
.innersidebarcontainer{ 
 
    position: relative; 
 
     width: 100%; 
 
    height: 100%; 
 
} 
 
.sidebar{ 
 
    width: 293px; 
 
    background-color: white; 
 
    height: 500px; 
 
    top: 1px; 
 
    position: absolute; 
 
} 
 
.mainpage{ 
 
    width: calc(100% - 300px); 
 
    padding: 5px; 
 
    padding-left: 2px; 
 
    height: 2000px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 
.page{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: white; 
 
} 
 
.footer{ 
 
    height: 500px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: #031003; 
 
}

<div class="container"> 
 
     <div class="sidebarcontainer"> 
 
      <div class="innersidebarcontainer"> 
 
        <div class="sidebar"> 
 
       </div> 
 
      </div> 
 
     </div><!-- 
 
    --><div class="mainpage"> 
 
     <div class="page"></div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"></div>

Answer 1

Ja, es ist ein Trick dafür:

.mainpage{ 
    vertical-align : top; // Add this 
} 

Auch die H1-Display Eigenschaft ändern:

h1{ 
    display : inline-block; 
} 

Alle Elemente bleiben dort, wo sie sein sollten. Die Freuden von CSS.

Working Fiddle

Answer 2

normal ist, display: inline-block ein wenig Platz zwischen den Elementen hinzufügen (und Sie haben keinen Platz mehr). Verwenden Sie stattdessen float und Ihr Code funktioniert.