Skip to content

Instantly share code, notes, and snippets.

@LouCypher

LouCypher/columns.css

Created March 16, 2012 21:03
Show Gist options
  • Save LouCypher/2052687 to your computer and use it in GitHub Desktop.
Save LouCypher/2052687 to your computer and use it in GitHub Desktop.
Download ZIP
Two column liquid floated layout
Raw
columns.css
/* Specify blanket rules for all elements */
body {
font-size:80%;
font-family:'Lucida Grande',Verdana,sans-serif;
margin:10px;
}
/* Rules for headings */
h1 {
font-size:150%;
}
h2 {
font-size:140%;
}
h3 {
font-size:120%;
}
/* Default paragraph styles */
p {
font-size:100%;
line-height:150%;
}
/* Header */
#header {
margin:0 0 10px 0;
padding:10px;
border:1px solid #000;
background-color:#CCC;
}
/* Content */
#content {
float:left;
width:54%;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
}
/* Sidebar */
#sidebar {
float:right;
width:36%;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
}
/* Footer */
#footer {
clear:both;
padding:10px;
border:1px solid #000;
background-color:#CCC;
}
Raw
columns.html
<html>
<head>
<title>Two column liquid floated layout</title>
<link rel='stylesheet' media="screen" type='text/css' href='../../columns.css' />
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment