Databases
StackOverflow2013
Postsdbo
POBackground color not covering full height of div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackground color not covering full height of div
    text
    copied!<p>---HTML </p> <pre><code>&lt;div id="story"&gt; &lt;div id="individual"&gt; &lt;img src='uploads/1231924837Picture.png'/&gt; &lt;h2&gt;2009-01-14&lt;/h2&gt; &lt;h1&gt;Headline&lt;/h1&gt; &lt;p&gt;stroy story etc stroy story etc stroy story etc&lt;/p&gt; &lt;/div&gt; &lt;br /&gt; &lt;div id="storynav"&gt; &lt;a href='home.php?start=0'&gt;1&lt;/a&gt; &lt;a href='home.php?start=1'&gt;2&lt;/a&gt; &lt;a href='home.php?start=2'&gt;3&lt;/a&gt; &lt;a href='home.php?start=3'&gt;4&lt;/a&gt; &lt;a href='home.php?start=4'&gt;5&lt;/a&gt; &lt;a href='home.php?start=5'&gt;6&lt;/a&gt; &lt;a href='home.php?start=6'&gt;7&lt;/a&gt; &lt;a href='home.php?start=7'&gt;8&lt;/a&gt; &lt;a href='home.php?start=8'&gt;9&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>---CSS</p> <pre><code>#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; } </code></pre> <p><a href="http://clients.bionic-comms.co.uk/drew/testygubbins/OO/test/img.png" rel="nofollow noreferrer">alt text http://clients.bionic-comms.co.uk/drew/testygubbins/OO/test/img.png</a></p> <p>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!</p> <p>EDIT</p> <p>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!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload