Место div ниже absolut div с переменной высотой

Question

У меня есть 2 div, которым нужно оставаться бок о бок. Для этого я поставил первый абсолют и просто добавил маржу слева ко второй. Это работает. Но у меня есть проблема, что оба могут иметь разные высоты, а элемент ниже всегда должен быть ниже самого высокого.

<div id="header"> 
    The header 
</div> 
<div id="contents"> 
    <div class="sidebar"> 
     <ul> 
      <li><a href="">Link 1</a></li> 
      <li><a href="">Link 2</a></li> 
      <li><a href="">Link 3</a></li> 
      <li><a href="">Link 4</a></li> 
      <li><a href="">Link 5</a></li> 
     </ul> 
    </div> 
    <div class="body"> 
     <p>Some content</p> 
    </div> 
</div> 
<div id="footer"> 
    The footer 
</div> 

Это весь код в стельку:

http://jsfiddle.net/qPtXL/17/

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

Answer 1

jsFiddle example

HTML:

<div id="header"> 
    The header 
</div> 
<div id="contents"> 
    <div class="sidebar"> 
     <ul> 
      <li><a href="">Link 1</a></li> 
      <li><a href="">Link 2</a></li> 
      <li><a href="">Link 3</a></li> 
      <li><a href="">Link 4</a></li> 
      <li><a href="">Link 5</a></li> 
     </ul> 
    </div> 
    <div class="body"> 
     <p>Some content</p> 
    </div> 
    <div class="clear"></div> 
</div> 
<div id="footer"> 
    The footer 
</div> 

CSS:

#header { 
    border: 1px solid red; 
    padding: 10px; 
    font-size: 20px; 
} 

#contents .sidebar { 
    width: 120px; 
    float: left; 
    background-color: gray; 
} 

#contents .body { 
    margin-left: 120px; 
    border: 1px solid green; 
} 

#footer { 
    border: 1px solid red; 
    padding: 10px; 
    font-size: 20px; 
} 

.clear { clear: both; } 

Answer 2

Here is a link to a css only layout, который имеет стиль с двумя колонками таким образом. Существует также расположение для столбчатых столбцов в этом виде. Причина, по которой вы испытываете трудности, связана с абсолютным элементом. Добавляя абсолютный атрибут, вы удаляете этот элемент (и его высоту/ширину) из коллекции элементов блока в этом контейнере. Он будет оставаться относительно контейнера, но он больше не будет воздействовать ни на один из окружающих элементов. Это также не повлияет на сам контейнер (например, делает его более высоким). Вам нужно будет немного поучиться с использованием ваших контейнеров при применении этого позиционирования, чтобы элементы растягивали контейнер независимо, не теряя своего позиционирования относительно друг друга.

Answer 3

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

fiddle

Answer 4

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

#header { 
    border: 1px solid red; 
    padding: 10px; 
    font-size: 20px; 
    float: left; 
    width: 100% 
} 

#footer { 
    border: 1px solid red; 
    padding: 10px; 
    font-size: 20px; 
    float: left; 
    width: 100% 
} 

#contents { 
    width: 100%; 
    height: auto; 
    float; 
    left; 
} 

#contents .sidebar { 
    height: auto; 
    width: 220px; 
    float: left; 
    border: 1px solid red; 
}