Hallo,
ich habe ein einfaches Grundgerüst für eine Responsive Webseite erstellt.
Wie ist es machbar, dass das "div Element Content" beim zusammenschieben
der Webseite nicht nach unten ausbricht?
Ich habe schon sehr viel probiert und keine Lösung gefunden.
Vielen Dank für die Hilfe!
Beste Grüße
Dieter
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Content floaten</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<style type="text/css">
body {
margin: 0em;
padding: 0em;
font-size: 62.5%; /* = 10px */
}
p {
font-size: 1.6em;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
/* WRAPPER */
#wrapper {
max-width: 86em;
margin: 0px auto;
border: solid 3px; color: #C1C4D1;
}
/* HEADER */
header {
width: 100%;
height: 100px;
margin-bottom: 0.5px;
background-color: #858585;
margin-top: -16px;
}
/* NAV */
nav {
/*width: 20.8%;*/
width: 16em;
height: 520px;
float: left;
background-color: #9B9B43;
}
/* CONTENT */
#content {
width: 81.1%;
height: 520px;
background-color: #FEE07A;
float: right;
margin: 1px 1px;
}
/* FOOTER */
footer {
clear: both;
position: relative;
width: 100%;
height: 60px;
background-color: #800000;
}
</style>
<body>
<div id="wrapper">
<header>
<p>HEADER</p>
</header>
<nav>
<div id="navigation">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Idee</a></li>
<li><a href="#">Termine</a></li>
<li><a href="#">Unterrichtskonzept</a></li>
<li><a href="#">Dozenten</a></li>
<li><a href="#"></a></li>
</ul>
</div>
</nav>
<div id="content">
<p>CONTENT</p>
</div>
<footer>
<p>FOOTER</p>
</footer>
</div>
</body>
</html>