<\/script>')
Geek Answers Handbook

The background color does not cover the full height of the div

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

The above code and css give me a headache because, as the image shows, the background color of the div gets confused when I add the images. This is dynamic content, but I thought it would be easier to show static html. Can someone tell me what I am doing wrong? The background color should also cover the image. Thanks!

EDIT

Thanks for this. This is what I tried before, but does nothing. I also tried a spacer and it does nothing. Embarrassed!

+3
source share
2 answers

, , - . , , .

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

, : 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;
}
0

More articles:


All Articles