<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3. Two-column layout with fixed right and left adaptive</title>
<style type="text/css">
.main {
height:600px;
background-color:skyblue;
margin-right:200px;
}
.right {
width:200px;
height:600px;
background-color:lightgreen;
float:right; /*Set the right float of the block element* /
}
</style>
</head>
<body>
<div> Body</div>
<div>right</div>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Agree with the second floor’s point of view
You use margin-right:200px;
Do you want to leave space for the div on the right?
But the default width of div is 100%
So after you set margin-right:200px; the div width is actually still 100%
Because padding, margin, width, border are added It is the real width or height of the component
Please change
<div>body</div>
<div>right side</div>
to
<div class="main">Main</div>
<div class="right">Right</div>
Test the code again ~
Why should I swallow the code? The class is gone