HTML 레이아웃 표현 방법 II

HTML 문서를 레이아웃하는데 있어서 디자이너들이 가장 어려움을 느끼는 것이 바로 포지셔닝(Positioning)과 디스플레이(Display) 입니다. 하지만 단계적인 접근으로 좀 더 쉽게 이해할 수 있을 것입니다.

목차

  1. 위치 지정(Positioning) : 정적(static) : 정상적인 흐름을 따르기~
  2. 위치 지정(Positioning) : 상대적(relative) : 상자의 초기 위치에서 오프셋(Offsetting)
  3. 위치 지정(Positioning) : 절대(absolute) 1 : 상자의 컨테이너를 기준으로 배치
  4. 위치 지정(Positioning) : 절대(absolute) 2 : 배치 된 상자 내부
  5. 위치 지정(Positioning) : 고정(fixed) : 뷰포트를 기준으로 함
  6. z- index : 배치 된 상자에 쌓입니다. (Stacking)
  7. 플로팅(Floating) 1 : 간단한 플로트(float) 박스
  8. 플로팅(Floating) 2 : 두 개의 플로팅 박스
  9. 플로팅(Floating) 3 : 떠 다니는 상자 지우기(Clear)
위치 지정(Positioning) : 정적(static) : 정상적인 흐름을 따르기~
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Positioning: static</title>
    <style>
        body {
            font: 1em/1.5 arial, helvetica, sans-serif;
        }
        
        div {
            width: 700px;
        }
        
        span {
            background: #f99;
            padding: 0 1em;
        }
        
        em {
            padding: 0 1em;
            background: #c00;
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore <span>R2D2</span><em>Torquil</em><span>Fred</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</body>
</html>
PREVIEW
위치 지정(Positioning) : 상대적(relative) : 상자의 초기 위치에서 오프셋(Offsetting)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Positioning: relative</title>
    <style>
        body {
            font: 1em/1.5 arial, helvetica, sans-serif;
        }
        
        div {
            width: 700px;
        }
        
        span {
            background: #f99;
            padding: 0 1em;
        }
        
        em {
            position: relative;
            top: 2em;
            left: 2em;
            padding: 0 1em;
            background: #c00;
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore <span>R2D2</span><em>Torquil</em><span>Fred</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</body>
</html>
PREVIEW
위치 지정(Positioning) : 절대(absolute) 1 : 상자의 컨테이너를 기준으로 배치
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Positioning: absolute</title>
    <style>
        body {
            font: 1em/1.5 arial, helvetica, sans-serif;
        }
        
        div {
            width: 700px;
        }
        
        span {
            background: #f99;
            padding: 0 1em;
        }
        
        em {
            position: absolute;
            top: 2em;
            left: 2em;
            padding: 0 1em;
            background: #c00;
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore <span>R2D2</span><em>Torquil</em><span>Fred</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</body>
</html>
PREVIEW
위치 지정(Positioning) : 절대(absolute) 2 : 배치 된 상자 내부
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Positioning: absolute 2</title>
    <style>
        body {
            font: 1em/1.5 arial, helvetica, sans-serif;
        }
        
        div {
            width: 700px;
        }
        
        p {
            position: relative;
        }
        
        span {
            background: #f99;
            padding: 0 1em;
        }
        
        em {
            position: absolute;
            top: 2em;
            left: 2em;
            padding: 0 1em;
            background: #c00;
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore <span>R2D2</span><em>Torquil</em><span>Fred</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</body>
</html>
PREVIEW
위치 지정(Positioning) : 고정(fixed) : 뷰포트를 기준으로 함
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Positioning: Fixed</title>
    <style>
        body {
            font: 1em/1.5 arial, helvetica, sans-serif;
        }
        
        div {
            width: 700px;
        }
        
        p {
            position: relative;
        }
        
        span {
            background: #f99;
            padding: 0 1em;
        }
        
        em {
            position: fixed;
            top: 2em;
            left: 2em;
            padding: 0 1em;
            background: #c00;
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore <span>R2D2</span><em>Torquil</em><span>Fred</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</body>
</html>
PREVIEW
z- index : 배치 된 상자에 쌓입니다. (Stacking)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Z-index</title>
    <style>
        body {
            font: 14px courier;
            background: #c72 url("./img/opacityBg.gif");
            color: #000;
            padding: 0;
        }
    
        p {
            position: absolute;
            width: 400px;
            height: 200px;
            background: white;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px #999;
            margin: 0;
        }
        code {
            padding: 0 15px;
        }

        .p1 {
            top: 80px;
            left: 80px;
            z-index: 4;
        }
        .p2 {
            top: 60px;
            left: 60px;
            z-index: 3;
        }
        .p3 {
            top: 40px;
            left: 40px;
            z-index: 2;
        }
        .p4 {
            top: 20px;
            left: 20px;
            z-index: 1;
        }
        p:hover {
            z-index: 6;
        }
        
        #borderKnu {
            top: 100px;
            left: 100px;
            z-index: 5;
        }
        #borderKnu a {
            display: block;
            width: 120px;
            height: 90px;
            padding: 55px 140px;
        }
    </style>
</head>
<body>
    <p class="p1"><code>z-index: 4;</code></p>
    <p class="p2"><code>z-index: 3;</code></p>
    <p class="p3"><code>z-index: 2;</code></p>
    <p class="p4"><code>z-index: 1;</code></p>
    <p id="borderKnu"><a href="#"><img src="./img/knulab.png" alt="HTML KNULAB"></a></p>
</body>
</html>
PREVIEW
플로팅(Floating) 1 : 간단한 플로트(float) 박스
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Floating 1</title>
    <style>
        body {
            font: 80%/1.5 arial, helvetica, sans-serif;
        }
        
        code {
            font: bold 1em courier;
        }
        
        #second {
            width: 7em;
            float: left;
            
            color: white;
            background: #060;
            padding: 1em;
            margin: 0;
        }
    </style>
</head>
<body>

    <p>First paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p id="second">Second paragraph. Has the CSS <code>width: 7em; float: left</code> applied.</p>
    <p>Third paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Fourth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Fifth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Sixth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Seventh paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</body>
</html>
PREVIEW
플로팅(Floating) 2 : 두 개의 플로팅 박스
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Floating 2</title>
    <style>
        body {
            font: 80%/1.5 arial, helvetica, sans-serif;
        }
        
        code {
            font: bold 1em courier;
        }
        
        #second {
            width: 7em;
            float: left;
            
            color: white;
            background: #060;
            padding: 1em;
            margin: 0;
        }
        
        #fourth {
            width: 20em;
            float: right;
            
            color: white;
            background: #006;
            padding: 1em;
            margin: 0;
        }
    </style>
</head>
<body>

    <p>First paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p id="second">Second paragraph. Has the CSS<br><code>width: 7em; float: left</code><br>applied.</p>
    <p>Third paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p id="fourth">Fourth paragraph. Has the CSS<br><code>width: 20em; float: right</code><br>applied.</p>
    <p>Fifth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Sixth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Seventh paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</body>
</html>
PREVIEW
플로팅(Floating) 3 : 떠 다니는 상자 지우기(Clear)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Floating 3</title>
    <style>
        body {
            font: 80%/1.5 arial, helvetica, sans-serif;
        }
        
        code {
            font: bold 1em courier;
        }
        
        #second {
            width: 7em;
            float: left;
            
            color: white;
            background: #060;
            padding: 1em;
            margin: 0;
        }
        
        #fourth {
            clear: left;
            border: 1px solid black;
        }
        
    </style>
</head>
<body>

    <p>First paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p id="second">Second paragraph. Has the CSS <code>width: 7em; float: left</code> applied.</p>
    <p>Third paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p id="fourth">Fourth paragraph. Has the CSS <code>clear: left</code> applied.</p>
    <p>Fifth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Sixth paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Seventh paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</body>
</html>
PREVIEW
Tags

Related Posts

you're currently offline