<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4. Two-column layout 2: left body adaptive_right column fixed width</title>
<style type="text/css">
.right {
width: 200px;
height: 600px;
float: right;
background-color: skyblue;
}
.main {
height: 600px;
background-color: cyan;
margin-right:200px;
}
</style>
</head>
<body>
<!-- DOM -->
<div class="main">left_main</div>
<div class="right" >Right side</div>
<!-- The css style remains unchanged. If the order of the two div blocks is exchanged, they will be displayed one above the other and cannot be displayed side by side. Why is this?-->
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The float you added before: right; just change it to float: left