생활코딩 - CSS 수업 - float - example2.html

http://opentutorials.org/course/45/63

HTML

<div class="wraper">
    <div class="navigation">
        <ul>
            Navigation
            <li>
                생활코딩이란?
            </li>
            <li>
                커리큘럼
            </li>
            <li>
                커뮤니티
            </li>
            <li>
                강의장소협찬
            </li>
            <li>
                수업요청
            </li>

        </ul>
    </div>
    <div class="content">
        Content
        한 때 이 땅위에는 컴퓨터학원이 국영수학원 만큼 있었다. 지금은 이 수요가 대학이나 직업학원으로 단일화 되었다. 옛날에는 취미인인 꼬꼬마들도 하던 프로그래밍이 이제는 직업인의 영역으로 퉁쳐진 것이다. 그런데 생각해보면 컴퓨터학원이 우후죽순 생겨나던 시절에 프로그래밍을 배워봐야 할 수 있는게 많지 않았다. 지금은 어떤가? 구글의 지도 API는 직전까진 삼엄한 군사정보였고, 제발 나 좀 공짜로 써달라고 애걸하는 오픈소스는 또 얼마나 많은가? 그런데 이제는 취미인들을 위한 컴퓨터학원이 없다. 몸에 좋은 개똥은 귀한 법인가?

        그래서 시작한 개똥 같은 캠페인이 생활코딩이다. 장담하건데 프로그래밍의 시대가 다시온다. 직업인들은 이미 이 사실을 감지하고 있는데 이를 암시하는 인상적인 풍경이 아이폰이다.
    </div>
    <div class="footer">
        Footer
    </div>
</div>

CSS

body {
    font-size: 12px;
}
ul {
    padding-left: 10px;
}
li {
    list-style: none;
}
.wraper {
    width: 400px;
}
.navigation {
    float: left;
    width: 100px;
    background-color: red;
    color: white;
}
.content {
    float: right;
    width: 300px;
    background-color: green;
    color: white;
}
.footer {
    clear: both;
    background-color: purple;
    color: white;
}