Ask a rookie about DIV floating_html/css_WEB-ITnose

ss

< img src="images/3510.png" width="272" height="300" />

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)

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.