Skip to content

Instantly share code, notes, and snippets.

@abondis

abondis/responsive.css

Created August 5, 2012 23:10
Show Gist options
  • Save abondis/3267781 to your computer and use it in GitHub Desktop.
Save abondis/3267781 to your computer and use it in GitHub Desktop.
Download ZIP
html + css
Raw
responsive.css
body {
width: 100%;
*zoom: 1; }
body:before, body:after {
content: "";
display: table; }
body:after {
clear: both; }
header#top {
margin-bottom: 1em;
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%; }
topmenu {
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%;
float: right; }
topmenu ul {
display: inline;
float: left;
width: 72.917%;
margin: 0 1.042%;
float: right;
padding: 0; }
topmenu ul li {
display: inline;
float: left;
width: 6.25%;
margin: 0 1.042%;
display: block;
float: left; }
rightblock {
display: inline;
float: left;
width: 72.917%;
margin: 0 1.042%; }
leftblock {
display: inline;
float: left;
width: 22.917%;
margin: 0 1.042%; }
@media screen and (max-width: 720px) {
rightblock,
leftblock {
display: inline;
float: left;
width: 97.917%;
margin: 0 1.042%;
margin-bottom: 1em; } }
Raw
test.html
<html><head>
<link href="responsive.css" type="text/css" rel="stylesheet">
<title>TODO</title>
</head>
<body>
<header>
A Header!
</header>
<topmenu>
<ul>
<li>Doc/Wiki</li>
<li>Tasks</li>
<li>Code</li>
</ul>
</topmenu>
<leftblock>
<ul>
<li>Wiki menu entry</li>
<li>Wiki menu entry2</li>
<li>Wiki menu entry3</li>
</ul>
</leftblock>
<rightblock>
blah
</rightblock>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment