Три колонки и footer, как работает, не могу разобраться

nitro · September 27, 2012

Изучаю один видео-курс по верстке и не могу понять как работают дивы "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>

Sign In

Три колонки и footer, как работает, не могу разобраться

Question

nitro

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information