<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width = device-width,initial-scale=1"> <title></title> <link rel="stylesheet" href="img/index01.css" /> </head> <body> <div class="heading"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footing"></div> </body> </html>
*{ margin: 0px; padding: 0px; } .heading, .container, .footing{ margin: 10px auto; } .heading{ height: 100px; background-color: chocolate; } .left, .right, .main{ background-color: cornflowerblue; } .footing{ height: 100px; background-color: aquamarine; } @media screen and (min- 960px){ .heading, .container, .footing{ width: 960px; } .left, .main, .right{ float: left; height: 500px; } .left, .right { width: 200px; } .main{ margin-left: 5px; margin-right: 5px; width: 550px; } .container{ height: 500px; } } @media screen and (min- 600px) and (max- 960px){ .heading, .container, .footing{ width: 600px; } .left, .main { float: left; height: 400px; } .right{ display: none; } .left{ width: 160px; } .main{ width: 435px; margin-left: 5px; } .container{ height: 400px; } } @media screen and (max- 600px){ .heading, .container, .footing{ width: 400px; } .left, .right{ width: 400px; height: 100px; } .main{ margin-top: 10px; width: 400px; height: 200px; } .right{ margin-top: 10px; } .container{ height: 420px; } }