CSS Forum

**April** · 08-09-2006, 01:42 PM

Okay, here's my problem: an image has a specified size (600px) and is nested inside another div with a width of (468px). The div which contains the image has no width specified.

Here is the web link to a page with this problem

Here's an XHTML code sample with the problem in it:

Code:

<div align="left" class="storyR">
    <div class="storyCon">
      <h1><a href="http://www.perezhilton.com/topics/jack_osbourne/quote_of_the_day_20060808.php" title="Quote Of The Day" target="_blank">Quote Of The Day</a></h1>
                
      <p class="storyInfo">Updated from <a href="/aggregator2/sources/27">Perez Hilton</a> on Tuesday, August 8, 2006 - 10:44am</p>

      <p class="storyInfo"><a href="/tagadelic">tags</a>: <a href="/taxonomy/term/24" rel="tag" title="More stories about music">music</a> | <a href="/taxonomy/term/204" rel="tag" title="">catty</a> | <a href="/taxonomy/term/120" rel="tag" title="">Hollywood</a> | <a href="/taxonomy/term/2838" rel="tag" title="More stories about jack osbourne">jack osbourne</a> | <a href="/taxonomy/term/139" rel="tag" title="">tv</a></p>    
            <p class="storySum">

      <p><img alt="josbourne.jpg" src="http://www.perezhilton.com/josbourne.jpg" width="400" height="400" /></p>
<p>"[Growing up] I was this fat kid with big specs in Hollywood, where everyone is beautiful, and I'd dealt with that by making myself look like a teenage freak. I do know that inside me I wanted to be someone else. You could say I've swapped one addiction for another. But I am so much more in control. I'd rather be facing one of the most dangerous physical feats in the world than getting out of my head. I really was killing myself back then and it was all pointless."</p>
<p>- <strong>Jack Osbourne</strong></p>
            </p>
      <p class="storyLinks"><a href="/node/11725" title="Read the rest of this posting." class="read-more">read more</a> | <a href="/user/login?destination=node%2F11725%23comment_form">login</a> or <a href="/user/register?destination=node%2F11725%23comment_form">register</a> to post comments | <a href="http://www.perezhilton.com/topics/jack_osbourne/quote_of_the_day_20060808.php">full article</a> | <a href="/aggregator2/sources/27">source</a> | <a href="/forward/11725" title="Forward this page to a friend" class="forward-page">email this page</a> | <a href="http://del.icio.us/post?url=http://www.rubybaboon.com/node/11725&amp;title=Quote+Of+The+Day" title="Bookmark this post on del.icio.us." rel="nofollow"><img src="/sites/default/modules/service_links/delicious.png" alt="delicious" /></a> | <a href="http://digg.com/submit?phase=2&amp;url=http://www.rubybaboon.com/node/11725" title="Digg this post on digg.com." rel="nofollow"><img src="/sites/default/modules/service_links/digg.png" alt="digg" /></a> | <a href="http://www.newsvine.com/_tools/seed&amp;save?u=http://www.rubybaboon.com/node/11725&amp;h=Quote+Of+The+Day" title="Submit this post on newsvine.com." rel="nofollow"><img src="/sites/default/modules/service_links/newsvine.png" alt="newsvine" /></a> | <a href="http://www.furl.net/storeIt.jsp?u=http://www.rubybaboon.com/node/11725&amp;t=Quote+Of+The+Day" title="Submit this post on furl.net." rel="nofollow"><img src="/sites/default/modules/service_links/furl.png" alt="furl" /></a> | <a href="/node/11725%23voters">show voters</a></p>

          </div>
  </div>

Here's the CSS for that sample code selection:

Code:

.storyR{float:left;width: 468px;}
.storyR img {border: 1px solid #900;}
.storyCon {margin-left: 10px;}
.storyInfo {margin: 3px 0px; font-size: 10px; color: #525252;}
.storyInfo a {font-weight: 700; color: #981c1f ; text-decoration: none;}
.storyInfo a:hover {color: #981c1f; text-decoration: underline;}
.storySum {margin: 0px; overflow:auto;}
.storyLinks {margin: 3px 0px;font-size: 11px; color: #;}
.storyLinks a {font-weight: 500; color: #981c1f; text-decoration: none;}
.storyLinks a:hover {color: #981c1f; text-decoration: underline;}

Now it seems the CSS overflow command applied to a ".storyCon img" class would solve this problem, but can overflow inherit the width from the .storyCon? And what about the fact a width is specified for the image?