Skip to content

Instantly share code, notes, and snippets.

@ralphcrisostomo

ralphcrisostomo/flexbox_layout.html

Created August 17, 2012 09:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ralphcrisostomo/3377334 to your computer and use it in GitHub Desktop.
Save ralphcrisostomo/3377334 to your computer and use it in GitHub Desktop.
Download ZIP
The classic 3 column layout. Notice the navigation appearing first, also note that the background colour extends to the full height of all boxes.
Raw
flexbox_layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>flexbox example - 3 column layout</title>
<meta name="author" content="Gwilym Johnston">
<link rel="stylesheet" href="base.css" type="text/css" media="screen">
<style type="text/css">
.flexbox {
display:-moz-box;
display:-webkit-box;
display: box;
text-align: left;
}
#main,
HEADER,
FOOTER {
min-width: 640px; /* prevents overflow */
}
H1 {
width: auto;
}
#box-1 {
height: auto;
min-width: 180px; /* prevents overflow */
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
box-ordinal-group: 2;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
#box-2 {
height: auto;
width: 180px;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
box-ordinal-group: 3;
}
#box-3 {
height: auto;
width: 130px;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<section id="main" class="flexbox">
<section id="box-1" class="flexbox">
<h1>1 Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<aside id="box-2" class="flexbox">
<h1>2 Sidebar</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</aside>
<nav id="box-3" class="flexbox">
<h1>3 Nav</h1>
<ul>
<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
</ul>
</nav>
</section>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment