CSS - позиционирование элемента с помощью float не работает

Question

Я пытаюсь расположить две панели и просто не могу заставить их работать ...

У меня есть страница-контейнер, обертывающая две панели, каждая со своей страницей.Я хочу расположить панели рядом с помощью поплавка.

Это мой CSS:

  .pages {width: 100%; position: absolute;}
  .leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
  .rightPanel {position: static;}

и HTML

  <div class="page">
    <div id="lefty" class="leftPanel">
      <div class="page">
        <p>helloworld</p>
      </div>
    </div>
    <div id="righty" class="rightPanel">
      <div class="page">
         <p>HELLO WORLD</p>
      </div>
    </div>    
 </div>

Я должен использовать положение: относительно для левой панели и положение: статическое для правой панели.Странно, но это работает в JSBin , но на моей реальной странице правая панель с позицией: static всегда имеет ширину 100%, охватывающую весь экран.

Любые намеки на то, что я могу делать не так?

Спасибо!

Answer 1

Добавьте это к своему CSS,

div.clear-both {clear: both;}

И измените свой HTML на это:

<div class="page">
  <div id="lefty" class="leftPanel">
    <div class="page"
      <p>helloworld</p>
    </div>
  </div>
  <div id="righty" class="rightPanel">
    <div class="page">
       <p>HELLO WORLD</p>
    </div>
  </div>    
  <div class="clear-both"></div>
</div>

Answer 2

div-элементы по умолчанию имеют ширину 100% от своих родительских элементов. Так как вы пропустили левую диву, вы вынули ее из потока, так что происходит то, что левая див фактически эффективно сидит вне потока элементов. Кроме того, float заставляет div сжиматься до размера его дочерних элементов. Поэтому, если вы хотите установить правый div, но против левого div, то вам нужно сделать две вещи: сначала добавить float:left; position:relative; к правильному стилю. Во-вторых, вы должны добавить div внизу, чтобы очистить ваши поплавки.

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

  .pages {width: 100%; position: absolute;}
  .leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
  .rightPanel {position: relative; float: left;}

  <div class="page">
    <div id="lefty" class="leftPanel">
      <div class="page">
        <p>helloworld</p>
      </div>
    </div>
    <div id="righty" class="rightPanel">
      <div class="page">
         <p>HELLO WORLD</p>
      </div>
    </div>
    <div style="clear:left;"></div>    
 </div>

Answer 3

Попробовать плавающие обе панели?На данный момент всплывает только левый ... попробуйте переместить их влево, а затем поместите между ними правильное количество полей, чтобы выстроить их в линию так, как вы хотите.Или даже плавающий один влево, а другой справа, вероятно, сработает.