• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Richtig umfließen

W

WilliTheSmith

Neues Mitglied
Hallo,
ich bin jetzt schon länger dabei ein Grundgerüst für ein weiteres Projekt auf Basis von HTML5 aufzustellen. Sieht auch alles soweit gut aus, nur ich bekomme es nicht hin, eine Sitebar rechts umfließen zu lassen, denn das Problem ist, das ich links mehrere Elemente habe, welche allesamt die Sidebar rechts daneben haben sollen. Also der Header, die Navigation und die Section sollen links sein, rechts das aSide und ganz unten der footer. Wenn ich die 3 zu umfließenden Blöcke in ein Div packe ist das ganze kein Problem(div und aside bekommen float: left und der footer clear), aber ich möchte gerne versuchen ohne absulute Positionierung oder zusätzliche divs auszukommen.


Erstmal der vereinfachte Code, wo noch nichts umflossen wird:
HTML: 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Economical Power</title>
    <style>
        body > * {
            width: 50em;
        }
        header {
            border-style: solid;
        }
        footer {
            text-align: center;
            width: 60em;
            border-style: solid;
            border-color: magenta;

        }
        section {
            border-style: solid;
            border-color: red;
        }
        nav {
            border-style: solid;
            border-color: green;
        }
        aside {
            border-style: solid;
            border-color: yellow;
            width: 10em;
        }
        h1 {
            border-style: solid;
            border-color: blue;
            margin: 0;
        }
        article {
            border-style: solid;
            border-color: brown;
        }
    </style>
</head>
<body>
    <header>
        <h1>Titel/Banner</h1>
    </header>
    <aside>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
        <p>Login/Spielerinfos</p>
    </aside>
    <nav>
        <ul>
            <li><a href="">Punkt 1</a></li>
            <li>
                <ul>
                    <li><a href="">Punkt 1.1</a></li>
                    <li><a href="">Punkt 1.2</a></li>
                </ul>
            </li>
            <li><a href="">Punkt 2</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1>Einleitung</h1>
            <p>Text...</p>
        </article>
        <article>
            <h1>Inhalt 1</h1>
            <p>Text...</p>
        </article>
        <article>
            <h1>Inhalt 2</h1>
            <p>Text...</p>
        </article>
    </section>
    <footer>
        <p>Copyright Tobias Möller</p>
    </footer>
</body>



Und hier zum vergleich der Code mit div, was ich gerne vermeiden würde:

HTML: 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Economical Power</title>
    <style>
        div#main {
            border-style: solid;
            margin: 4em  0  0  4em;
            width: 50em;
            float: left;
        }
        div#side {
            border-style: solid;
            margin: 4em  0  0  0em;
            width: 10em;
            float: left;
        }
        footer {

            clear: left;
            margin: 0  0  0  4em;
            text-align: center;
            width: 60em;
            border-style: solid;
            border-color: magenta;

        }
        section {
            border-style: solid;
            border-color: red;
        }
        nav {
            border-style: solid;
            border-color: green;
        }
        aside {
            border-style: solid;
            border-color: yellow;
        }
        h1 {
            border-style: solid;
            border-color: blue;
            margin: 0;
        }
        article {
            border-style: solid;
            border-color: brown;
        }
    </style>
</head>
<body>
    <div id="main">
        <header>
            <h1>Titel/Banner</h1>
        </header>
        <nav>
            <ul>
                <li><a href="">Punkt 1</a></li>
                <li>
                    <ul>
                        <li><a href="">Punkt 1.1</a></li>
                        <li><a href="">Punkt 1.2</a></li>
                    </ul>
                </li>
                <li><a href="">Punkt 2</a></li>
            </ul>
        </nav>
        <section>
            <article>
                <h1>Einleitung</h1>
                <p>Text...</p>
            </article>
            <article>
                <h1>Inhalt 1</h1>
                <p>Text...</p>
            </article>
            <article>
                <h1>Inhalt 2</h1>
                <p>Text...</p>
            </article>
        </section>
    </div>
    <div id="side">
        <aside>
            <p>Login/Spielerinfos</p>
        </aside>
        <nav>
            <ul>
                <li><a href="">Punkt 1</a></li>
                <li><a href="">Punkt 2</a></li>
            </ul>
        </nav>
    </div>
    <footer>
        <p>Copyright Tobias Möller</p>
    </footer>
</body>


Wäre toll, wenn ihr mir sagen könntet, wie ich mein Vorhaben möglich machen kann. :)

Gruß
 
Hallo,

Ich habe dir mal dein 2. Beispiel so angepasst, dass die Logik stimmt.

HTML: 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Economical Power</title>
    <style>
        * {
            
        }
        body {
            border-style: solid;
            margin: 0 auto;
            width: 60em;
        }
        header {
            width:50em;
        }
        footer {

            clear: left;
            text-align: center;
            width: 60em;
            border-style: solid;
            border-color: magenta;

        }
        section {
            border-style: solid;
            border-color: red;
            width:50em;
        }
        nav {
            border-style: solid;
            border-color: green;
            
        }
        aside {
            border-style: solid;
            border-color: yellow;
            width: 9.4em;
            float: right;
        }
        h1 {
            border-style: solid;
            border-color: blue;
            margin: 0;
        }
        article {
            border-style: solid;
            border-color: brown;
        }
    </style>
</head>
<body>
    <aside>
        <p>Login/Spielerinfos</p>
        <ul>
            <li><a href="">Punkt 1</a></li>
            <li><a href="">Punkt 2</a></li>
        </ul>
        <nav>
            <ul>
                <li><a href="">Punkt 1</a></li>
                <li>
                    <ul>
                        <li><a href="">Punkt 1.1</a></li>
                        <li><a href="">Punkt 1.2</a></li>
                    </ul>
                </li>
                <li><a href="">Punkt 2</a></li>
            </ul>
        </nav>
    </aside>

    <header>
        <h1>Titel/Banner</h1>
    </header>
    
    <section>
        <article>
            <h1>Einleitung</h1>
            <p>Text...</p>
        </article>
        <article>
            <h1>Inhalt 1</h1>
            <p>Text...</p>
        </article>
        <article>
            <h1>Inhalt 2</h1>
            <p>Text...</p>
        </article>
    </section>
    
    <footer>
        <p>Copyright Tobias Möller</p>
    </footer>
</body>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben