*{box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif}header{background-color:#666;padding:30px;text-align:center;font-size:35px;color:#fff;height:20%;text-shadow:3px 3px #333}nav{float:left;width:20%;height:1000px;background:#ccc;padding:20px}nav ul{list-style-type:none;padding:0}article{float:left;padding:20px;width:80%;background-color:#f1f1f1;height:1000px}section:after{content:"";display:table;clear:both}footer{background-color:#777;padding:10px;text-align:center;color:#fff;height:10%}@media (max-width: 600px){nav,article{width:100%;height:auto}}