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

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

Вот мой 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;
        }

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

2 ответа

  1. Используйте position: relativeвнутри .container.

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

  2. Обновить

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


    Вам нужно очистить ваши поплавки. Подробнее вы можете прочитать здесь .

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

    .clearfix:before,
    .clearfix:after {
     content: "";
     display: table;
    }
    
    .clearfix:after {
     clear: both;
    }
    
    .clearfix {
     zoom: 1; /* ie 6/7 */
    }
    

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

    Ссылка: Sitepoint