HTML - Как остановить перекрытие div

Question

HTML - Как остановить перекрытие div

0

У меня есть div, который я использую как "боковую панель", которая имеет ширину: 100% и позиция: исправлена. эта боковая панель хранит мою навигацию. У меня также есть другой div, который называется "content". он имеет ширину 600 пикселей и я использовал "margin-left: auto, margin-right: auto", чтобы центрировать его между боковой панелью и краем страницы.

Но проблема в том, что это два divs перекрываются. как я могу остановить его от перекрытия? Я включил кодировку HTML и CSS ниже.

HTML

<body>
<div id="leftpanel">
    <div id="nav">
      <ul>
              <li><a href="index.html">home</a></li>
            <li><a href="">the future</a></li>
            <li><a href="">contact details</a></li>
        </ul>
    </div>
</div>

<div id="content">
    <div id="header">
        <p><img src="images/haroon-ahmed.png" class="imgaligncentre"/></p>
    </div>
</div>
</body>'

CSS

#leftpanel {
float:left;
height:100%;
width:320px;
postion:fixed;
}
#content {
width:600px;
padding-top:50px;
padding-bottom:50px;
margin-right:auto;
margin-left:auto;
}

user3424543 16 март 2014, в 01:32

Источник

Теги:

html

css

1 ответ

Ещё вопросы

CRABOLO · Answer 1 · 2014-03-15T23-30-00.000Z

Так вы можете остановить их от перекрытия.

DEMO

#content {
   margin-left: 320px;
}

Когда вы используете position:fixed; , это означает, что элемент не заботится о других элементах на странице. Неважно, касаются ли они их, над ними, под ними. Это касается только положения относительно окна (т.е. экрана пользователя).

Так что ваша # #leftpanel находится на самой левой стороне и имеет ширину 320. Просто установите margin-left от #content до 320 пикселей.

Что если я добавлю div, который находится прямо под боковой панелью? Таким образом, я все еще могу использовать маржу авто