Как выровнять один div внутри контейнера, а другой выровнять по правому краю окна браузера?

Question

У меня есть 2 div внутри контейнера, я хочу установить один div по левому краю контейнера, а другой - по правому краю браузера через css.Это возможно?

Пример изображения

Кто-нибудь поможет мне исправить эту скрипку?

.container {
  background: #ccc;
  height: 400px;
  max-width: 500px;
  margin:0 auto;
}

.outer {
  background: #f8f9fa;
  margin-top: 40px;
}

.left-box {
  background: #000;
  color: #fff;
  padding: 10px 0;
  float:left;
  width:50%;
  margin-top:20px;
  height:100px;
}

.right-box {
  background: #EC8400;
  padding: 10px 0;
  float:right;
  margin-top:20px;
  width:50%;
  height:100px;
}

<div class="container">
  <div class="outer">
    <div class="left-box">
      some text
    </div>
    <div class="right-box">
      text/image here
    </div>
  </div>
</div>

Answer 1

да, сначала поместите нужный div в браузере справа от контейнера, так как он действительно не имеет смысла в div, но если вы хотите его внутри контейнера, это все еще возможно.

попробуйте это

// if the right-box is outside the container
.right-box
{
position: absolute;
right : 0;
}


// if the right-box is inside the container
.right-box
{
position: absolute;
left : 100%;
}

Примечание : второй запускает ваш правый ящик с крайнего правого угла вашего контейнера и может быть настроен по вашему вкусу.

аналогично левому ящику

Answer 2

Вы можете использовать фиксированную позицию, а затем левую 0 для div, который вы хотите выровнять влево и вправо 0 для того, который вы хотите выровнять вправо.Css будет примерно таким

.divleft {
    position: fixed;
    left: 0;
}

.divright {
    position: fixed;
    right: 0;
}