css-layout-floats.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Layout with Absolute Positioning</title> | |
<style> | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
#container { | |
width: 960px; | |
margin: 0px auto; | |
} | |
.header { | |
padding: 30px; | |
background: pink; | |
} | |
.left-column { | |
float: left; | |
width: 300px; | |
background: yellow; | |
} | |
.right-column { | |
float: right; | |
width: 660px; | |
background: lime; | |
} | |
.footer { | |
padding: 30px; | |
clear: both; | |
background: cyan; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div class="header"> | |
<h1>Header</h1> | |
</div> | |
<div class="left-column"> | |
<ul> | |
<li>Link 1</li> | |
<li>Link 2</li> | |
<li>Link 3</li> | |
<li>Link 4</li> | |
<li>Link 5</li> | |
</ul> | |
</div> | |
<div class="right-column"> | |
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p> | |
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p> | |
</div> | |
<div class="footer"> | |
<h3>Footer</h3> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment