<div class="wrapper">
<h1>Liquid Layout Example</h1>
<header>HEADER</header>
<nav>NAV</nav>
<section>SECTION</section>
</div>
/**************************************
LIQUID LAYOUT CSS
**************************************/
.wrapper {
width: 100%;
}
nav, section {
float: left;
}
nav {
width: 20.83333%;
margin-right: 1.041667%;
}
section {
width: 78.125%;
}
/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #2980b9;
color: #FFF;
font-family: Helvetica;
text-align: center;
margin: 0;
}
header,
nav,
section {
border: 1px solid rgba(255,255,255,0.8);
margin-bottom: 10px;
border-radius: 3px;
}
header {
padding: 20px 0;
}
nav, section {
padding: 200px 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.