couleur d'arrière-plan ne couvre pas toute la hauteur de la 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; 
} 

alt text http://clients.bionic-comms.co.uk/drew/testygubbins/OO/test/img.png

Le code ci-dessus et css me donne un mal de tête parce que, Comme le montre l'image, la couleur d'arrière-plan de div devient confuse quand j'ajoute des images dedans. C'est le contenu dynamique mais j'ai pensé qu'il serait plus facile de montrer le HTML statique. Quelqu'un peut-il me dire ce que je fais mal? La couleur d'arrière-plan devrait également couvrir l'image. Merci!

EDIT

Merci pour cela. C'est quelque chose que j'avais déjà essayé mais ça ne fait rien. J'ai aussi essayé une entretoise là aussi et ça ne fait rien. Flummoxed!

Answer 1

Vous définissez l'image flotter à droite, ce qui signifie que le conteneur div ne peut pas déterminer sa hauteur réelle. Vous devez effacer l'élément flottant qui permet essentiellement au conteneur de connaître la taille réelle de l'image.

Vous aurez besoin d'ajouter un élément avec le style clear: both; sous la balise img dans votre code HTML, de préférence à la fin de la div comme ceci:

<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> 

Et ajoutez la classe:

.clear 
{ 
    clear: both; 
} 

Answer 2

Vous avez bien lu: http://www.quirksmode.org/css/clearing.html

En bref, essayez ceci:

--- 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; 
}