Hi,
ich hätte gern eine "sticky" Menüleiste und darunter den Inhalt auf zwei Spalten aufgeteilt. Nun weigert sich das Menü aber, "sticky" zu bleiben, wenn darunter die <div>s floaten... Hier mal der Code dazu:
Code
<body>
<style>
* {
box-sizing: border-box;
}
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
margin: 0;
color: #444;
width: 100vw;
}
.header {
padding: 5px 5px 5px 15px;
margin-top: 10px;
width: 100vw;
height: 10%;
background-color: grey;
}
.menu {
padding: 5px;
margin-bottom: 5px;
width: 100vw;
background-color: aquamarine;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.col-50{
float: left;
width: 50%;
padding: 0 10px 0 10px;
}
.col-100{
width: 100%;
padding: 10%;
}
</style>
<div class="header">
Kopfzeile
</div>
<div class="menu">
Hier ist das Menü
</div>
<div class="col-50">
Inhalts Text diesdas tral lalalala In
halts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala <br>
Inhalts Text diesdas tral lalalala
Inhalts Text diesdas tral lalalala
Inhalts Text diesdas tral lalalala <br> <br>
Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala
<br><br><br>
Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala
Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala
Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala
</div>
<div class="col-50">
Inhalts Text diesdas tral lalalala In
halts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala <br>
Inhalts Text diesdas tral lalalala
Inhalts Text diesdas tral lalalala
Inhalts Text diesdas tral lalalala <br> <br>
Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala
<br><br><br>
Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala
Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala
Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala Inhalts Text diesdas tral lalalala
</div>
</body>Ohne das
Code
float: left;bei der col-50 funktioniert es, nur teilt sich der Inhalt dann logischerweise nicht mehr auf. Wie kriege ich das beides unter einen Hut?