Skip to content

Instantly share code, notes, and snippets.

@inerd89
Created September 15, 2014 19:08
Show Gist options
  • Select an option

  • Save inerd89/14ca1090404ce03d024b to your computer and use it in GitHub Desktop.

Select an option

Save inerd89/14ca1090404ce03d024b to your computer and use it in GitHub Desktop.
Box model example
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="main">
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
<div class="sidebar"></div>
<div class="footer"></div>
</div>
body {
background-color: #cfcfcf;
padding: 0;
margin: 0;
}
p {
margin: 0;
}
p + p {
margin-top: 1em;
}
.wrapper {
background: white;
width: 1400px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.header {
background-color: #444;
padding: 20px;
height: 45px;
}
h1 {
color: white;
line-height: 45px;
margin: 0;
}
.main {
background-color: #fff;
width: 1020px;
min-height: 500px;
/* float: left; */
padding: 40px;
padding-bottom: 120px;
}
.sidebar {
background-color: #999;
width: 300px;
/*min-height: 500px;*/
/* float: left; */
position: absolute;
top: 0px;
right: 0;
bottom: 0;
margin-top: 85px;
margin-bottom: 100px;
}
.footer {
height: 100px;
background: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment