Click to See Complete Forum and Search --> : Trouble displaying paragraph with image as block


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">&nbsp;</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.

criterion9
10-07-2009, 09:26 AM
Usually I use what most would consider bad form and put a <br /> with clear:both inbetween those elements. I do know that this breaks the form and function separation rule but there is no good way to tell the components to clear that gap without a series of extra steps in css, html, or otherwise. In my opinion this is an area that is lacking as well as being able to horizontally align components or match the larger of heights of given components (such as in columns).

Windhorse
10-07-2009, 09:36 AM
I appreciate your thoughts, criterion9. Adding clear:both in conjunction with display:block in the .leadingseparator class solved the issue.

wdfrq
10-07-2009, 10:47 AM
u can try with

overflow: hidden;


----------------------------------------
Easy Web Development Tutorial (http://sumotuto.com/html_intro.php)