Изучаю один видео-курс по верстке и не могу понять как работают дивы "out" и "in". Без них отображается неправильно. * { margin: 0; padding: 0; } html, body, #container { height: 100%; } html { background: #fff; color: #333; } #container { min-width: 800px; max-width: 1000px; margin: auto; background: url(../i/left.png) repeat-y; } #main { min-height: 100%; margin: 0 0 -100px; background: url(../i/right.png) repeat-y 100% 0; } #all { overflow: hidden; padding: 0 0 100px; background: url(../i/left.png) repeat-y; } #out { float: right; width: 100%; margin-left: -200px; } #in { float: left; width: 100%; margin-right: -200px; } #left { width: 200px; float: left; /*background: #f00;*/ } #right { width: 200px; float: right; /*background: #cfc;*/ } #center { margin: 0 200px; /*background: #ccf;*/ } #footer { height: 100px; background: #cfc; } <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>3 columns</title> <link rel="stylesheet" type="text/css" href="css/common.css" media="screen"> <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"> <![endif]--> </head> <body> <div id="container"> <div id="main"> <div id="all"> <div id="out"> <div id="in"> <div id="center"> center center center center center center center center center center center center center center center center center center center center center center center </div> </div> <div id="right">right</div> </div> <div id="left">left</div> </div> </div> <div id="footer"></div> </div> </body> </html>
