Ask a rookie about DIV floating_html/css_WEB-ITnose

243a8f3f087936dc3f96e2f0cf018c22
fb023a6321138dbcef553164fc089917ss16b28748ea4df4d9c2150843fecfba68
deb2845d5cf6ded3cfabb2dc6ae7561e9ffb80d740991f5a13ba481b6bc7d21716b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
This is what the CSS looks like
#main
{
margin:12px 0px 0px 0px;
width:100%;
height:600px;
}

#main-left
{ width:660px;
height:553px;
float:left;
}

#main-right1
{
width:300px;
height:100px;
.
The question arises, why main-right1 does not surround the right side of main-left, but is below main-left, and even overflows the main DIV. .
If width:300px;max-height:100px; is deleted, main-right1 will be around the right side of main-left

Reply to discussion (solution)

c9ccee2e6ea535a969eb3f532ad9fe89

* {margin:0px;padding:0px;}
#main {margin-top:12px;width:100%;height:600px;p}
#main- left {width:660px;height:553px;float:left;}
#main-right1 {width:300px;height:100px;float:left;}
531ac245ce3e4fe3d50054a55f265927

In addition, the width of your main DIV is 100%; when the browser shrinks, there will definitely be overflow. . .

Simple debugging: Look, the red one in the middle can be used as a blank.

tiaoshi: Used during debugging, it can be selectively deleted.

#main{margin:12px 0px 0px 0px;width:100%;height:600px;}#main-left{ width:660px;  height:553px;  padding:auto;  margin:auto;  background-color:#cccccc;/*tiaoshi*/  float:left;}#blank{ /*tiaoshi*/	width:10px;	height:100px;	float:left;	margin:auto;	background-color:red;/*tiaoshi*/}#main-right1{     width:300px;  height:100px;  padding:auto;  margin:auto;  background-color:blue;/*tiaoshi*/}

<div id="main">  <div id="main-left">ss</div>  <div id="blank">s</div><!--tiaoshi-->  <div id="main-right1">ss</div>    </div>

If there is no image inside the div, it can be wrapped around the right side of main-left. . I know this. .

You try this: add display:block to main-left; add float:right to main-right1;

You add float:left to #main-right1, Or reduce the width of the two divs.