Newbie, I have a question, thank you! _html/css_WEB-ITnose

I have three layers nested in a div_main. How can I achieve the effect of arranging them side by side? Secondly, I have used absolute positioning for the three layers but it still doesn’t work. Moreover, I feel that the middle and right layers are not inside the main. Please advise, thank you!
Code:
body {
padding:0px;
background:url(images/beijing1.jpg) #000 repeat left top;
font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
color: #CF0;
font-size:12px;
line-height:150%;
}

#header{

MARGIN: auto;
BORDER: 1px #CCCCCC solid;
background: url(images/header_beijing.jpg) #CCC no-repeat left top;
WIDTH: 1000px;
HEIGHT: 100px;
text-align:center

}

#div_main{
padding:0px;
width:1000px;
background:url(images/div_main_beijing.jpg) #CCC no-repeat left top;
margin:20px auto auto auto;
border: 1px #CCC solid;

}

#div_left_sidebar{
margin:10px auto 10px 10px;
border:0px #00ff00 solid;
background: url(images/side_beijing.jpg) #CCC no-repeat left top;
background-size:cover;
width: 200px;
height:600px;
background-size:cover;
}

#div_zhongjian_sidebar{
float:right;
left:220px;
top:10px;
margin:10px auto 10px auto;
border:0px #00ff00 solid;
background: url(images/zhongjian_beijing.jpg ) #CCC no-repeat left top;
background-size:cover;
width: 560px;
height:600px;

}

#div_right_sidebar{
float:right;
left:790px;
top:10px;
margin:10px 10px 10px auto;
border:0px #00ff00 solid;
background: url(images/side_beijing. jpg) #CCC no-repeat left top;
background-size:cover;
width: 200px;
height:600px;


Page code:
< body>

This is the head title

>

Reply to discussion (solution)

<style>	body {padding:0px;background:url(images/beijing1.jpg) #000 repeat left top;font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;color: #CF0;font-size:12px;line-height:150%; }#header{                   MARGIN: auto;         BORDER: 1px #CCCCCC solid; background: url(images/header_beijing.jpg)  #CCC no-repeat left top; WIDTH: 1000px; HEIGHT: 100px; text-align:center  } #div_main{padding:0px;width:1000px;background:url(images/div_main_beijing.jpg) #CCC no-repeat left top;margin:20px auto auto auto;border: 1px #CCC solid;}#div_left_sidebar{margin:10px auto 10px 10px;border:0px #00ff00 solid;background: url(images/side_beijing.jpg)  #CCC no-repeat left top;background-size:cover;width: 200px;height:600px;background-size:cover;float:left;}#div_zhongjian_sidebar{float:left; margin:10px auto 10px auto;border:0px #00ff00 solid;background: url(images/zhongjian_beijing.jpg)  #CCC no-repeat left top;background-size:cover;width: 520px;height:600px;}#div_right_sidebar{float:right; margin:10px 10px 10px auto;border:0px #00ff00 solid;background: url(images/side_beijing.jpg)  #CCC no-repeat left top;background-size:cover;width: 200px;height:600px;}	</style>  <div id="header"><strong>这里是头部标题</strong> </div><div id="div_main">  <div id="div_left_sidebar"></div>    <div id="div_zhongjian_sidebar"></div>    <div id="div_right_sidebar"></div>  </div>

Thank you, can you explain why this is, and why the background images of the left and right layers cannot automatically adapt to the size of the layer? ah?

Use float, the width cannot be too full, otherwise it will wrap.

Use background-size:cover; The background image cannot adapt to the size of the layer?

Use float, the width cannot be too full, otherwise it will break. Will wrap

Use background-size:cover; The background image cannot adapt to the size of the layer?
Thanks for the lesson,
background-size:cover; The problem may be the aspect ratio of my image and The reason why the aspect ratio of the coating is different, I just checked online, it may be this reason, thank you!