Skip to content

Instantly share code, notes, and snippets.

@aspirisen
Last active August 29, 2015 14:14
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save aspirisen/0f389e6f2f6be0fceac9 to your computer and use it in GitHub Desktop.
Float
/**
* Float
*/
body{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
position: relative;
}
header{
background: #eee;
}
#content{
float: left;
width: 45%;
margin-right: 5%;
clear:both;
left: 50%;
position: relative;
}
.floats{
background: lightgreen;
position: relative;
left: -50%;
}
#sidebar{
padding-left: 5px;
float: left;
background: #999;
width: calc(30% - 5px);
}
footer{
float:left;
background: dodgerblue;
clear: both;
display: inline;
}
<div id="wrap">
<header>
<h1>Header</h1>
</header>
<div id="content">
<ul class="floats">
<li>123</li>
<li>342</li>
</ul>
</div>
<div id="sidebar">
sidebar
</div>
<footer>
footer
</footer>
</div>
// alert('Hello world!');
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment