Windhorse
10-07-2009, 09:11 AM
Hello,
I am working on styling some dynamically generated content (Joomla CMS) where the source code will look something like this:
<div id="wrapper">
<div class="leading">
<h2 class="contentheading"><a href="#" class="contentpagetitle">Heading One</a></h2>
<p><img style="float: right; margin-left: 10px;" src="image_placeholder.jpg" width="120px" height="150px" />Content...</p>
</div>
<span class="leading_separator"> </span>
<div class="leading">
<h2 class="contentheading"><a href="#" class="contentpagetitle">Heading Two</a></h2>
<p><img style="float: right; margin-left: 10px;" src="image_placeholder.jpg" width="120px" height="150px" />Content...</p>
</div>
</div>
My problem is that, if the height of the image in the upper "leading" div is greater than the height of the of the text in the enclosing paragraph, the image will overlap into the space of the following "leading" div.
I attempted to correct this by using the following CSS, however, it seems to have no effect:
.leading { display: block; }
.leadingseparator { display: block; }
I have posted an example of this http://windhorsemedia.com/private/20091007/.
I am sure I am missing something really simple but it is not coming to me this morning. Thanks in advance for any suggestions.
I am working on styling some dynamically generated content (Joomla CMS) where the source code will look something like this:
<div id="wrapper">
<div class="leading">
<h2 class="contentheading"><a href="#" class="contentpagetitle">Heading One</a></h2>
<p><img style="float: right; margin-left: 10px;" src="image_placeholder.jpg" width="120px" height="150px" />Content...</p>
</div>
<span class="leading_separator"> </span>
<div class="leading">
<h2 class="contentheading"><a href="#" class="contentpagetitle">Heading Two</a></h2>
<p><img style="float: right; margin-left: 10px;" src="image_placeholder.jpg" width="120px" height="150px" />Content...</p>
</div>
</div>
My problem is that, if the height of the image in the upper "leading" div is greater than the height of the of the text in the enclosing paragraph, the image will overlap into the space of the following "leading" div.
I attempted to correct this by using the following CSS, however, it seems to have no effect:
.leading { display: block; }
.leadingseparator { display: block; }
I have posted an example of this http://windhorsemedia.com/private/20091007/.
I am sure I am missing something really simple but it is not coming to me this morning. Thanks in advance for any suggestions.