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

_{(source: bionic-comms.co.uk)}

The above code and css is giving me a headache because, as the picture shows, the div background color gets confused when i add images in. This is dynamic content but i thought it would be easier to show the static html. Can any one tell me what i am doing wrong? The background color should cover the picture as well. Thanks!

EDIT

Thanks for that. It is something i had previously tried but it doesn’t do anything. I have also tried a spacer in there as well and that doesn’t do anything. Flummoxed!

Answer 1

You are setting the image to float right which means that the container div cannot work out it’s actual height. You need to clear the floated element which essentially lets the container know how large the image actualy is.

You will need to add an element with the style clear: both; underneath the img tag in your HTML, preferably at the end of the div like so:

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

And add the class:

.clear {   clear: both; }