фиксированный div перекрывает другой div в контейнере

У меня есть два divs в обертке. Один плавает влево с шириной 20%, один плавает прямо на 80% ширины. Оба имеют максимальную ширину 2000 пикселей с автоматическими полями, чтобы центрировать контент. Проблема, с которой я сталкиваюсь, заключается в том, что при большей ширине divs начинают перекрываться, и я не могу понять, как их получить бок о бок независимо от ширины.фиксированный div перекрывает другой div в контейнере

Вот мой HTML:

<body> 
<div class="wrapper"> 
<div class="container"> 
</div> 
<div class="slider"> 
</div> 
</div> 
</body>

Вот мой CSS

body 
    { 
    background-color: #3F3F3F; 
    } 


.wrapper 
    { 
    width: 100%; 
    height: auto; 
    max-width: 2000px; 
    margin-left:auto; 
    margin-right:auto; 
    } 

.container 
    { 
    width: 20%; 
    background-color:#F6F6F6; 
    height: 200px; 
    float: left; 
    position: fixed; 
    max-width: 2000px; 
    margin-left:auto; 
    margin-right:auto; 
    } 

    .slider { 
     width: 80%; 
     height: 2000px; 
     float: right; 
     position: relative; 
     background-color: #8A0002; 
     opacity: .2; 
     max-width: 2000px; 
     margin-left:auto; 
     margin-right:auto; 
     }

Я студент и очень признателен за любую помощь !!!

источник

2016-05-02 AdamLeeSFC

вы хотите что-то вроде этого https: //jsfiddle.net/7wb8drq5/ –

Использовать position: relative в .container.

С position: fixed, как представляется, вычислить контейнер как 20% ширины обертки + ее полей.

источник

2016-05-02 23:22:36

Спасибо за отвечая на мой вопрос, но я хотел бы сохранить .container исправленным, поскольку он будет содержать навигацию, а .slider будет состоять из прокручиваемого содержимого. – AdamLeeSFC

Update

пожалуйста, игнорировать этот ответ я держал его за комментарий.

Вам нужно очистить свои поплавки. Вы можете read more here.

Это JSFiddle образец одного из способов сделать это. или вы можете просто добавить элемент внутри своей обертки и очистить его.

.clearfix:before, 
.clearfix:after { 
content: ""; 
display: table; 
} 

.clearfix:after { 
clear: both; 
} 

.clearfix { 
zoom: 1; /* ie 6/7 */ 
}

добавить это сделать свой CSS и и изменить свою обертку для <div class="wrapper clearfix">

ссылочных: Sitepoint

источник

2016-05-02 23:23:33

Спасибо, что ответили на мой вопрос. Я выполнил ваши инструкции, и изменения в CSS не сработали для меня, но я обязательно прочитаю больше об очистке поплавков. – AdamLeeSFC

@AdamLeeSFC попробуйте этот 'body {margin: 0;}'. Пожалуйста, проигнорируйте эту скрипку. –

фиксированный div перекрывает другой div в контейнере

ответ

Смежные вопросы