Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 13.04.2017, 11:40
Soelg Soelg ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard Floaten Responsive Webseite

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>
Mit Zitat antworten
Sponsored Links