left align image & css boundaries

Hi,

I'm having a couple of issues with images inserted into one of my tags. It's selecting articles from a database which may or may not contain images. It's fine when it does this without images, but when it includes images (depending on the screen width) it goes all screwy.

If the screen is wide and there isn't a lot of text (ie the image is deeper than the text), the left-aligned image drops down below the bottom of the div (class=article) and then knocks the divs below (floating left) out of position.

You can see what I mean on http://testbench.thesyp.org.uk/ and then make your page as wide as possible.

I'm having the same problem with the image in the introduction - it throws the 'news' header out to the left (the image in this case is right aligned).

Any advice you can offer on this would be much appreciated.

Thanks!

echo '<h2>'.$row['title'].'</h2><div class="dateLeft">'.$row['dateadded'].'</div>';
echo '<div class="article">'.$row['article'].'</div>';

Code (markup):

and here's the relevant css classes

h2 {

font-size: 1.2em;
font-weight: bold;
text-align: left;
}
.dateLeft {
text-align: left;
font-size: 0.9em;
margin-bottom: 3px;
font-style: italic;
}
.article {
margin-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
padding-bottom: 5px;
}

 

The images are effectively being floated.

You need to make sure the next element in the flow is cleared - an easy way is to insert the following div immediately above the paragraph with 'More About Us'

<div style="clear: both;"></div>

or you could apply the style to the <p> tag

 

it worked for that first instance - thank you!

The problem is in the articles where the image is inserted via a cms. I've tried the following, but wonder if perhaps I should be diong something with the image instead of the paragraph it's in with?

$article=$row['article'];
$articleClean = str_replace("<p>","<p style=\"clear: both\";>", $article);
echo '<h2>'.$row['title'].'</h2><div class="dateLeft">'.$row['dateadded'].'</div>';
echo '<div class="articleExtra">'.$articleClean.'</div><div style="clear: both;"></div>
';

PHP:

 

Thanks for your help so far - I've managed to fix the top of the page using the extra div, but I've still got this problem.

Basically, the bottom border is not extending beyond the bottom of the image - it simply occurs immediately after the end of the text. I've tried clearing the values by inserting the text in a div, but I won't be able to do that when it's drawn from a database.

Should I just use a table instead?

 

See my enclosing float elements demo.

cheers,

gary

 

Thanks kk5st - I'll look into that!