Skip to content

Instantly share code, notes, and snippets.

@ilovejs

ilovejs/All-Relative-Some-float-Clearfix.html

Created August 21, 2013 00:42
Show Gist options
  • Save ilovejs/6289145 to your computer and use it in GitHub Desktop.
Save ilovejs/6289145 to your computer and use it in GitHub Desktop.
Download ZIP
child elements are floating to left, having clearfix div at last.
Raw
All-Relative-Some-float-Clearfix.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GETTING STARTED WITH BRACKETS</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="main.css">
</head>
<style>
#outter{
position:relative; /* this is relative layout */
width: 750px;
/*
height:200px;
overflow:hidden;
*/
margin: 15px auto;
padding: 20px;
background-color: #369;
border: solid 1px black;
}
#first{
position:relative;
/*
top:0;
left:0;
*/
float:left;
width:220px;
}
#second{
position:relative;
/*
top:0;
left:200px;
*/
float:left;
width:220px;
}
#third{
position:relative;
/*
top:0;
left:20px;
*/
float:left;
width:220px;
}
</style>
<!--
<style>
#outter {
position: relative;
width: 750px;
margin: 15px auto;
background-color: #369;
border: solid 1px black;
}
#first {
position: relative;
top: 0;
left: 0;
background-color: #ccf;
float: left;
width: 220px;
padding: 15px;
}
#second {
position: relative;
top: 0;
left: 250px;
background-color: #fcc;
width: 220px;
padding: 15px;
}
div#third {
position: relative;
top: 0;
left: 500px;
background-color: #cff;
width: 220px;
padding: 15px;
}
</style>
-->
<body>
<div id="outter">
<div id="first">
<h2>First col</h2>
<p>Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1
</p>
</div>
<div id="second">
<h2>Second col</h2>
<p>Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1
</p>
</div>
<div id="third">
<h2>third col</h2>
<p>Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1 Dummy test 1
</p>
</div>
<div id="clearfix" style="clear:both;"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment