CSS - float 속성

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                border:1px solid gray;
                padding:5px; margin:5px;
                text-align: center;
            }

            #con{
                width:800px; margin:0 auto;
                overflow:hidden;
            }

            #header{ width:780px; height:100px; line-height: 100px;}
            #nav{border:1px solid green;width:780px; height:100px; }
            #nav ul{overflow: hidden;}
            #nav ul li{ width:138px; height:40px; line-height: 40px;
            text-align: center; list-style: none; float:left;
            border:1px solid gray;}

            #wrap{
                width:780px; overflow: hidden; 
            }

            #content{
                width:600px; height:300px; float:left;
            }

            #banner{width:135px; height:300px; float:left;}
            #footer{ width:780px; height:100px; line-height: 100px;}

        </style>
    </head>

    <body>
        <div id="con">
            <div id='header'>
                HEADER
            </div>

            <div id="nav">
                <p>NAVIGATION</p>
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                    <li>menu4</li>
                    <li>menu5</li>
                </ul>
            </div>

            <div id="wrap">
                <div id="content">CONTENT</div>
                <div id="banner">BANNER</div>
            </div>

            <div id="footer">
                FOOTER
            </div>
        </div>
    </body>
</html>

[javascript] currentTarget과 target의 차이점

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage