<div class="wrap" style="min-width: 600px; width: 80%; margin: auto; background: green; overflow: hidden;"> <h1>My Second Website</h1> <div class="content" style="height: 600px; background: red; float: left; width: 80%;"> <h2>Main Content Heading</h2> <p>This is my blog.</p> </div> <aside style="height: 600px; background: brown; float: left; width: 20%;"> <h2> Sidebar </h2> <ul style="list-style: none; padding-left: 0;"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> </ul> </aside> </div> css: .wrap { min-width: 600px; width: 80%; margin: auto; background: green; overflow: hidden; } .content, aside { height: 600px; } .content { background: red; float: left; width: 80%; } aside { background: brown; float: left; width: 20%; } aside ul { list-style: none; padding-left: 0; }