float och sidfot

[thatjeeves]

Hej.

Jag planerar att göra en hemsida med vertikal navigering. <div>-taggen med brödtexten ska ha float: left och navigeringen float: right. Jag vill även ha en sidfot. Jag har lärt mig att man ska ha clear: both på sidfoten. Hur exakt ska kodningen se ut? I vilken ordning ska div-taggarna komma i källkoden?

[welander]

Här kommer ett väldigt snabbt men fungerande exempel:

​<div class="wrapper">
    <div class="head">Rubrik</div>
    <div class="content">Content kommer här</div>
    <div class="nav">
        <ul>
            <li><a href="#">Länk 1</a></li>
            <li><a href="#">Länk 2</a></li>
        </ul>            
    </div>
    <div class="footer">Footer</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​.wrapper {
    width: 70%;
    margin: 20px auto;
}

.head {
    width: 100%;
    height: 20px;
    background: #ddd;
}

.content {
    background: #333;
    color: #fff;
    float:left;
    width: 70%;
}

.nav {
    background: red;
    float:left;
    width: 30%;
}

.footer {
    background: #000;
    color: red;
    clear: both;
}
​

Du får detta resultat: http://jsfiddle.net/9g2rp/

Men precis, sätt clear: both; på footern.