I have written code for a responsive website that has two blocks (Box1 orange color and Box2 Blue color). The width of both the boxes is adjustable (as per the code below) however the same is not true for their height. The code is as below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A simple float-based responsive design</title>
<style>
.container{
width: 100%;
height: 800px;
border: 1px solid black;
}
.box1{
width: 19.67%;
height: 19.67%;
background-color: orange;
float: left;
}
.box2{
width: 19.67%;
height: 19.67%;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>When I resize the window size, the width of both the boxes adjusts itself but their height remains the same. What could be done here to improve the code?
