Untitled

<!DOCTYPE html>

<html>
    <head>
        <title>Div Layout</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!--<link rel="stylesheet" type="text/css" href="div_layout.css"/> -->
       <style>
           *{box-sizing: border-box;}


           div.one{
               border: 1px solid black;
               height: 100px;
               width: 20%;
               background-color: red;
               float: left;
           }

           div.two{
               border: 1px solid black;
               height: 100px;
               width: 80%;
               background-color: green;
               float: left;
           }

           div.three{
               border: 1px solid black;
               height: 80px;
               width: 100%;
               background-color: powderblue;
               float: left;
           }

           div.four{
               border: 1px solid black;
               height: 300px;
               width: 20%;
               background-color: red;
               float: left;
           }

           div.five{
               border: 1px solid black;
               height: 300px;
               width: 60%;
               background-color: green;
               float: left;
           }


           div.seven{
               border: 1px solid black;
               height: 60px;
               width: 100%;
               background-color: powderblue;
               float: left;
           }

       </style>
    </head>
    <body>
        <div class="one">
              <img src="image/img_1.jpg" alt="logo" height="100%" width="100%"/>
            </div>
            <div class="two">

            </div>

            <div class="three"><h1 align="center">Site Using Div</h1></div>

            <div class="four"> </div>

            <div class="five"> </div>

            <div class="four"> </div>

            <div class="seven"> </div>


    </body>
</html>