<div class="header">
  <h1>Floated layout</h1>

<div class="main">
<div class="sidebar">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
<div class="article">
  <h1>Welcome to our floated layout site</h1>
  <p>Far from perfect but look how much cleaner this code is.</p>
  <p> Utilises a clearfix hack, and background linear gradient on .main parent element.</p>

<div class="footer">
  <p>copyright ©Floated SCHOOL ltd</
*{ padding:0; margin:0;}
body {font:16px Helvetica, Arial,sans-serif; margin:10px;}
.header {background-color:#91AB6F; padding:25px;}
.header h1{ font-size:30px; color:white;}
.main { background: linear-gradient(90deg, #B1D188 25%,#C7EB98 25.0001%, #B1D188 100%);}
.sidebar  { width:25%; float:left;}
.sidebar ul{ line-height:40px; list-style:none; font-size:19px; padding:20px}
.sidebar a {color:#5B6B46;}
.article  { float:left; width:75%; padding-bottom:9em; }
.article h1{ margin:25px;}
.article p{ margin:25px;}
.main:after{ content:""; display:table; clear:both;}

.footer{ background-color:#5B6B46; color:white; text-align:center; padding:10px;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.