Ошибка в контейнере HTML/CSS

Question

Я хочу, чтобы контейнер (фиолетовая рамка) увеличивался в размерах вместе с основным содержимым, поэтому я могу разместить вокруг него границу, чтобы она выглядела как боковая панель (синяя граница) - полная высота.

<div id="container"> 
    <section id="mainContent"> 
     <h1>title here</h1> 
      <img src="images/jayzmchg.jpg"></img> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis. 
      Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur 
      a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, 
      cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac 
      ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis 
      venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet 
      ligula scelerisque hendrerit.</p> 
    </section> 

    <div id="sidebar"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div> 

<footer id="footer"> 
     <p></p> 
</footer> 

Выше HTML, следующий CSS-код

#container { /* purple border */ 
height: 250px; 
margin: 0 auto; 
max-width: 1000px; 
border: 1px solid #FF00FF; 
    } 

#mainContent { /*red border */ 
float: left; 
width: 700px; 
border: 1px solid #FF0000 
    } 

#sidebar {/*blue border */ 
width: 294px; 
float: right; 
border: 1px solid #0000FF; 
    } 

ив установите высоту в 250px для контейнера, так что вы можете увидеть его, ив пытался установить его как 100%, но как раз не показать все, что я предполагаю, это потому, что в них нет содержания, но как я могу сделать так, чтобы он действовал так, как если бы внутри mainContent была его высота.

добавление переполнения: скрытый в контейнер вызывает этот

Answer 1

Положите float:left; на #container.

ИЛИ

overflow:hidden; Положите на #container, чтобы очистить внутренние поплавки.

Пример скрипка: http://jsfiddle.net/3jNTv/

Крис Coyier написал большой пост об этом здесь: http://css-tricks.com/all-about-floats/

Answer 2

Попробуйте установить высоту heigh: 100%;?

Answer 3

Попробуйте это, увидеть живой пример:

link

height: auto !important; 

Answer 4

Я добавил класс floClear и добавить DIV. он будет работать нормально.

CSS 

#container { /* purple border */ 

    margin: 0 auto; 
    max-width: 1000px; 
    border: 1px solid #FF00FF; 
} 

#mainContent { /*red border */ 
    float: left; 
    width: 700px; 
    border: 1px solid #FF0000 
} 

#sidebar {/*blue border */ 
    width: 294px; 
    float: right; 
    border: 1px solid #0000FF; 
} 

.floClear 
{ 
    clear:both; 
} 

HTML

<div id="container"> 
    <section id="mainContent"> 
     <h1>title here</h1> 
      <img src="images/jayzmchg.jpg"></img> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis. 
      Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur 
      a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, 
      cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac 
      ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis 
      venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet 
      ligula scelerisque hendrerit.</p> 
    </section> 

    <div id="sidebar"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    <div class="floClear"></div> 
</div> 

<footer id="footer"> 
     <p>Test</p> 
</footer>