0

.main {
  width: 900px;
  margin: 0px auto;
  background:red;
}

.menu {
  width: 150px;
  float: left;
  margin: 0px 50px 0px -35px;
    background:yellow;
}

.content {
  width: 650px;
  height: 500px;
  margin: 35px 0px 0px 15px;
  padding: 65px 0px 15px 30px;
  overflow: auto;
  float: left;
  position: relative;
  z-index: 1;
    background:green;
}

.top {
  width: 650px;
  margin: -65px 0px 0px -35px;
  padding: 10px 15px 10px 25px;
  position: relative;
  z-index: 2;
    background:gray;
}

.bottom {
  width: 650px;
  margin: 500px 0px 0px -35px;
  padding: 10px 15px 10px 25px;
    background:blue;
}
<div class="main">
  <div class="menu">
    меню
  </div>
  <div class="top">вверх</div>
  <div class="content">
    блок с содержимым
  </div>
  <div class="bottom">низ</div>
</div>
</div>

Расположил элементы по центру, это меню и сам блок с содержимым, потом добавил еще элементы, они служат как верх и низ блока с содержимым, но при выравнивании, они ушли вниз (под блок с содержимым), а не вверх, тем самым, при прокрутке содержимого с фиксированной высотой, вверх и низ не остаются на месте, а крутятся с ним же, плюс полоса прокрутки выше встала...

<div class="main">
    <div class="menu">
        меню
    </div>
    <div class="top">вверх</div>
        <div class="content">
            блок с содержимым
        </div>
        <div class="bottom">низ</div>
    </div>
</div>

а это стили

.main {
    width: 900px;
    margin: 0px auto;
}
.menu {
    width: 150px;
    float: left;
    margin: 0px 50px 0px -35px;
}
.content {
    width: 650px;
    height: 500px;
    margin: 35px 0px 0px 15px;
    padding: 65px 0px 15px 30px;
    overflow: auto;
    float: left;
    position: relative;
    z-index: 1;
}
.top {
    width: 650px;
    margin: -65px 0px 0px -35px;
    padding: 10px 15px 10px 25px;
    position: relative;
    z-index: 2;
}
.bottom {
    width: 650px;
    margin: 500px 0px 0px -35px;
    padding: 10px 15px 10px 25px;
}
2
  • извините за корректировку текста, не получилось сделать его читаемым(css)
    – ivanforpw
    13 ноя 2012 в 23:39
  • @ivanforpw выделяем и жмем {}
    – Sh4dow
    14 ноя 2012 в 0:04

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.