JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<body>
 
<div id="header">Hier der Kopfbereich mit einer Höhe von 60px</div>
<div id="leiste">Leiste mit kleinen Navigationspunkten</div>
 
<div id="navi">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
        <li><a href="#">Link 10</a></li>
    </ul>
</div>
 
<div id="inhalt">
    <p>Hier steht der Inhalt drin mit Rest der Breite. Problem ist nun, wenn ich hier etwas drin floate und danach wieder clearen muss. Dann springt alles unter die Navigation...</p>
    <span style="float:right;">gefloatetes Elemente</span>
    <p>Dieser Text hier ist nun zu tief, nämlich unter der Navigation, da er auch die linke Navi gecleart hat und das soll nicht sein....</p>
    <p>Dieser Text hier ist nun zu tief, nämlich unter der Navigation, da er auch die linke Navi gecleart hat und das soll nicht sein....</p>
    <p>Dieser Text hier ist nun zu tief, nämlich unter der Navigation, da er auch die linke Navi gecleart hat und das soll nicht sein....</p>
<p>Dieser Text hier ist nun zu tief, nämlich unter der Navigation, da er auch die linke Navi gecleart hat und das soll nicht sein....</p>
</div>
 
</body>

CSS

html,body
{
    margin:0;
    padding:0;
    font-family:Arial;
    font-size:12px;
}
 
div#header
{
    height:60px;
    background:#C33;
}
 
div#leiste
{
    height:30px;
    background:#C90;
}
 
div#navi
{
    float:left;
    width:200px;
    background:#F9C;
}
 
div#inhalt
{
    background:#6CF;
    margin-left:200px;
    padding:10px;
}