Цвет фона не покрывает всю высоту div

Question

--- HTML

<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>

<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a>  
<a href='home.php?start=5'>6</a>  
<a href='home.php?start=6'>7</a>  
<a href='home.php?start=7'>8</a>  
<a href='home.php?start=8'>9</a>         
</div>
</div>

--- CSS

#story img{
border: none;
float: right;
display: inline;
padding: 10px;
margin-top: 30px;
}
#story{
width: 600px;
height: inherit;
background-color:black;
margin-left: 34px;
margin-bottom: 3px;
}

#individual{
background-color: #000000;
clear:both;
}

#storynav{
font-size: 10px;
text-align: center;
}

_{(источник: bionic-comms.co.uk )}

Приведенный выше код и css вызывают у меня головную боль, потому что, как показано на рисунке, цвет фона div запутывается, когда я добавляю изображения. Это динамический контент, но я подумал, что будет проще показать статический HTML. Кто-нибудь может сказать мне, что я делаю не так? Цвет фона также должен охватывать картинку. Спасибо!

EDIT

Спасибо за это. Это то, что я пробовал ранее, но ничего не делает. Я также пробовал проставки там, и это ничего не делает. Смущенный!

Answer 1

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

Вам нужно будет добавить элемент со стилем clear: both; под тегом img в вашем HTML, предпочтительно в конце div, например:

<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>

<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a>  
<a href='home.php?start=5'>6</a>  
<a href='home.php?start=6'>7</a>  
<a href='home.php?start=7'>8</a>  
<a href='home.php?start=8'>9</a>         
</div>
  <div class="clear"></div> <-- add this here
</div>

И добавить класс:

.clear
{
  clear: both;
}

Answer 2

Прочитайте это: http://www.quirksmode.org/css/clearing.html

Короче, попробуйте это:

--- HTML

<div id="story">
<div id="individual">
<img src='uploads/1231924837Picture.png'/>

<h2>2009-01-14</h2>
<h1>Headline</h1>
<p>stroy story etc stroy story etc stroy story etc</p>
</div>
<br />
<div id="storynav">
<a href='home.php?start=0'>1</a> 
<a href='home.php?start=1'>2</a> 
<a href='home.php?start=2'>3</a> 
<a href='home.php?start=3'>4</a> 
<a href='home.php?start=4'>5</a>  
<a href='home.php?start=5'>6</a>  
<a href='home.php?start=6'>7</a>  
<a href='home.php?start=7'>8</a>  
<a href='home.php?start=8'>9</a>
<div class="clear"></div>
</div>
</div>

--- CSS

#story img{
border: none;
float: right;
display: inline;
padding: 10px;
margin-top: 30px;
}
#story{
width: 600px;
height: inherit;
background-color:black;
margin-left: 34px;
margin-bottom: 3px;
}

#individual{
background-color: #000000;
clear:both;
}

#storynav{
font-size: 10px;
text-align: center;
}

.clear {
    clear: both;
}