0
Ich habe ein Problem mit einem meiner divs speziell .mid-content. Es nimmt die gesamte Höhe meiner äußeren div .main-Inhalt, aber ich möchte es unter meinen anderen zwei inneren divs .posts und .Sidebars. Stattdessen ist es auf der linken Seite .Seitenleisten.Div nimmt die gesamte Höhe des Containers und bleibt am unteren Ende
Ich habe versucht, die Anzeige der .mid-Inhalt div in einen Block noch das Problem besteht weiter. Ich habe auch versucht, mit den Überlaufeinstellungen im Container div herumzuspielen, weil dadurch der Rand meines Headers entfernt wird.
Hier ist mein Code
HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<body>
<div class="container">
<div class="header">
<ul class="navigation-bar">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="main-content">
<div class="posts top-buffer">
<div class="post">
<h1>A Post About Something</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
</p>
</div>
</div>
<div class="sidebars top-buffer">
<div class="sidebar">
<h1>Sidebar One</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
</p>
</div>
</div>
<div class="mid-content">
<h1>
This Should be below everything
</h1>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
font-family: futura;
}
body {
background-color: #f2f2f2;
}
.container {
width: 80%;
margin: 0 auto;
}
.header {
width: 100%;
height: 80px;
background-color: #777777;
border: 3px solid black;
border-radius: 5px;
}
.navigation-bar {
height: 80px;
width: 80%;
}
.navigation-bar > ul {
margin: 0 auto;
}
.navigation-bar > li {
width: 20%;
list-style: none;
float: left;
}
.navigation-bar > li > a {
display: block;
color: white;
line-height: 80px;
text-align: center;
text-decoration: none;
}
.navigation-bar a:hover, .navigation-bar a:active, .active {
background-color: #ff8989;
}
.main-content {
overflow: hidden;
}
.top-buffer {
margin-top: 2%;
}
.posts {
width: 55%;
float: left;
border: 3px solid black;
padding: 2% 4%;
margin-top: 2%;
margin-bottom: 4%;
border-radius: 5px;
background-color: #ffc893;
}
.sidebars {
width: 26%;
float: right;
border: 3px solid black;
border-radius: 5px;
padding: 2% 3%;
background-color: #b5ffb2;
}
.mid-content {
width: 100%;
display: block;
}
mit plnkr Aktualisiert zu demonstrieren. –
Das behebt das Problem aber ist es, dass, wenn ich zum Beispiel einen Rand von 20px mache, die Positionierung des div: .mid-Inhalts gleich bleibt? – buttonSmasher96
Ändern Sie die Anzeige von Block zu Inline-Block und Sie können Rand und Padding auf das Div anwenden. –