Ask a rookie about DIV floating_html/css_WEB-ITnose

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.

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.