css размещение блоков на странице

Логика  размещения блок с использованием css отличается от привычной табличной логики. Это я вам и покажу на примере. Допустим нам нужно расположить блоки как показано на рисунке

blocks-css

<html>

<head>
<link rel=»stylesheet» href=»styles.css»>
</head>

<body>
<div class=»header»>
header
</div>
<div class=»main»>
<div class=»block1″>
block1
</div>
<div class=»right»>
<div class=»block2″>
block2
</div>
<div class=»center»>
<div class=»block3″>
block3
</div>
<div class=»block4″>
block4
</div>
</div>
</div>
</div>
</body>

</html>

и соответственно таблица со стилями

* {
  margin: 0;
  padding: 0;
  color: #ffffff
}
div.header {
  text-align: center;
  background-color: #004e52
}
div.main {
  overflow: hidden
}
div.block1 {
  float: left;
  width: 200px;
  text-align: center;
  ;
  background-color: #004e52
}
div.right {
  margin-left: 200px;
  overflow: hidden
}
div.block2 {
  margin-top: 10px;
  float: right;
  width: 200px;
  text-align: center;
  background-color: #004e52
}
div.center {
  margin-right: 200px
}
div.block3 {
  margin: 10px;
  text-align: center;
  background-color: #004e52
}
div.block4 {
  margin: 10px;
  text-align: center;
  background-color: #004e52
}

результат на лицо. пользуйтесь

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *