Skip to content

Instantly share code, notes, and snippets.

@jonschoning
Forked from dneimke/fluidlayout.html
Created August 29, 2013 19:02
Show Gist options
  • Select an option

  • Save jonschoning/6382089 to your computer and use it in GitHub Desktop.

Select an option

Save jonschoning/6382089 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1,maximum-scale=1,user-scalable=0' />
<title>My Fluid Pages</title>
<link rel='stylesheet' href='styles.css' />
</head>
<body>
<div id='logo'>
<div>Fluidity</div>
</div>
<div id='content'>Main content here</div>
<div id='footer'>
<div>Action</div>
<div>Action</div>
<div>Action</div>
</div>
</body>
</html>
body {
background-color: #ffca75;
margin: 0;
}
body > div {
margin-left: 10%;
margin-right: 10%;
margin-top: 2em;
margin-bottom: 2em;
}
#logo {
color: #fff;
width: 100%;
background-color: #0047ab;
margin: 0;
}
#content {
background-color: rgba(0,0,0,.5); /* so we can see how much of the screen is taken up */
height: 50%;
}
#footer {
width: 91.5%;
min-height: 25%;
max-height: 25%;
}
#footer div {
background-color: rgba(0,0,0,.5); /* so we can see how much of the screen is taken up */
height: 25%;
display: inline-block;
width: 29%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment