<style> body { width: 1000px; margin: 0 auto; } #aside { float: left; width: 200px; } #section { float: left; width: 800px; } </style> <body> <divid="header">header</div> <divid="nav">nav</div> <divid="wrap"> <divid="aside"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed sollicitudin mauris. Aliquam faucibus facilisis vulputate. Curabitur condimentum placerat mattis. Duis at metus at tellus volutpat ultrices. Cras lorem eros, cursus et risus sit amet, gravida feugiat libero. Nullam id faucibus ipsum. Nulla a leo sed eros mattis bibendum. Nullam et sapien in orci tempus elementum eu sed augue. Pellentesque eu vestibulum arcu. Pellentesque vel finibus libero. Nulla facilisi. Quisque dolor enim, ornare eget elit ac, pharetra porta ex. Vivamus eleifend eu arcu nec consequat. </p> </div> <divid="section"> <p> Nam pulvinar dictum nibh id ullamcorper. Suspendisse justo eros, tempor vel faucibus in, pellentesque congue enim. Proin non eleifend turpis, vel commodo purus. Fusce vitae nisl dapibus, tincidunt elit at, cursus lacus. Maecenas varius imperdiet sollicitudin. Nunc pharetra fringilla enim ut facilisis. Curabitur maximus nibh non rhoncus semper. Duis porta, purus ut tincidunt convallis, sem purus pharetra erat, eu vestibulum tellus mi id eros. Fusce congue, erat at blandit mollis, tellus ex semper velit, dapibus commodo ante turpis a neque. Fusce vel ex id sem auctor accumsan. Maecenas finibus nunc sem, ut gravida felis efficitur at. Pellentesque lobortis dui non ligula condimentum, at auctor dui blandit. </p> </div> </div> <divid="footer">footer</div> </body>
<style> body { width: 1000px; margin: 0 auto; } .clear { clear: both; } #aside { float: left; width: 200px; } #section { float: left; width: 800px; } </style> <body> <divid="header">header</div> <divid="nav">nav</div> <divid="aside"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed sollicitudin mauris. Aliquam faucibus facilisis vulputate. Curabitur condimentum placerat mattis. Duis at metus at tellus volutpat ultrices. Cras lorem eros, cursus et risus sit amet, gravida feugiat libero. Nullam id faucibus ipsum. Nulla a leo sed eros mattis bibendum. Nullam et sapien in orci tempus elementum eu sed augue. Pellentesque eu vestibulum arcu. Pellentesque vel finibus libero. Nulla facilisi. Quisque dolor enim, ornare eget elit ac, pharetra porta ex. Vivamus eleifend eu arcu nec consequat. </p> </div> <divid="section"> <p> Nam pulvinar dictum nibh id ullamcorper. Suspendisse justo eros, tempor vel faucibus in, pellentesque congue enim. Proin non eleifend turpis, vel commodo purus. Fusce vitae nisl dapibus, tincidunt elit at, cursus lacus. Maecenas varius imperdiet sollicitudin. Nunc pharetra fringilla enim ut facilisis. Curabitur maximus nibh non rhoncus semper. Duis porta, purus ut tincidunt convallis, sem purus pharetra erat, eu vestibulum tellus mi id eros. Fusce congue, erat at blandit mollis, tellus ex semper velit, dapibus commodo ante turpis a neque. Fusce vel ex id sem auctor accumsan. Maecenas finibus nunc sem, ut gravida felis efficitur at. Pellentesque lobortis dui non ligula condimentum, at auctor dui blandit. </p> </div> <!-- clear:both 노드 추가 --> <divclass="clear"></div>