Warum erzwingt ul einen Box-Umbruch?

yezinia · 26.01.2014

Ok das ist das erste mal, dass ich hier eine Frage stelle, aber ich stehe wirklich auf dem Schlauch, habe sozusagen das ultimative Brett vorm Kopf:

Warum erzwingt ul einen Box-Umbruch?

HTML

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Code.Institute - Programmieren lernen: schnell, einfach, kostenlos</title>
        <link href="./style/cimain.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="contentbox" class="clearfix">
            <!-- Left coloumn 33% of viewport size -->
            <div id="leftcol">
                <h1 id="pagetitle">Code Institute</h1>
                <ul>
                    <li>
                        Hauptmen&uuml;
                    </li>
                </ul>
            </div>
       
            <!-- Right coloumn 66% of viewport size -->
            <div id="contentcol">
                <div>
                    asdasd
                </div>
            </div>
        </div>
    </body>
</html>

Dazugehöriges CSS

Code:

* {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    height: 100%;
}

html {
    background-color: #787878;
    height: 100%;
    width: 100%;
}

#contentbox {
    background-color: #656565;
    width: 100%;
    height: 100%;
    position: relative;
}

#leftcol {
    background-color: #323232;
    background-image: url(./images/cibglogo.gif);
    background-repeat: no-repeat;
    height: 100%;
    width: 33%;
    float: left;
}

.clearfix:after {
    content: ".";
    display: none;
    visibility: hidden;
    clear: both;
    height: 0px;
    line-height: 0;
}

#leftcol h1 {
    font-size: 30pt;
    color: #ABABAB;
    font-family: helvetica;
    font-variant: small-caps;
    margin-top: 85px;
    margin-left: 50px;
}

#leftcol ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position: relative;
}

#leftcol ul li {
    font-size: 16px;
    color: #ABABAB;
    font-weight: bold;
    font-family: helvetica;
    font-variant: small-caps;
}

cebito · 26.01.2014

Weil du mit dem Universalselector sagst, das ALLE Elemente eine Höhe von 100% haben sollen.

Code:

* {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    height: 100%; /* sorgt dafür das alles immer 100% Höhe des Elternelements besitzt */
}

Und bitte, beim nächsten mal einen Titel wählen, der das Problem schon kurz anreißt.

yezinia · 26.01.2014

Zum Titel: Sorry, war auf hass gepolt, als ich den Beitrag geschrieben habe. Wird nicht wieder vorkommen.

Zum Problem: Bor das is so einfach, dass ich vor Scham im Erdboden versinken möchte