<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="page"> <div class="menu">MENU</div> <div class="clearfix"> <div class="sidebar">SIDEBAR</div> <div class="content">CONTENT</div> </div> <div class="footer">FOOTEER</div> </div> </body> </html> ---------------------------------------------------------- body{ margin: 0; padding: 0; box-sizing: border-box; } .menu { background-color:#B2D6FF; height: 100px; } .sidebar { float: left; background-color:#F09A9D; height: 300px; width: 30%; } .content { float:right; width: 70%; background-color:#F5CF8E; height:300px; } .footer { background-color: #D6E9FE; height: 200px; } .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { clear: both; *zoom:1; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter