css float problem

Hello again, I'm having another headache!

I am trying to float images within a div containing the image (left) and a paragraph of text to the right. However the bottom border of the container div ends after the text, I can't get it to extend below the image if the paragraph is short http://www.northwiltsholidayclub.org.uk/havingfun.html

I don't really want the text going under the images where the paragraph is long either - how can I achieve a simple box with image on one side and text on the other?

I want to float some divs containing text on my home page as well but that does the same thing,as soon as I add the float the bottom border of the containing div reverts upwards. http://www.northwiltsholidayclub.org...ghomepage.html

I feel it would be better to have the content first in the html (before the right column ads) but I can't work out whether this is possible because I also want the content column to be fluid width.

Sorry this is so basic - as I've mentioned elsewhere in these forums my knowledge is from internet tutorials etc and is full of holes, and this is my first try. Any help much appreciated.

Now I've realised I have put this in the wrong place and I can't move it, sorry! I'll try again in the right place (ie complete beginners), so moderators please remove this when you find it.

To make container div extend below all floating elements in the div you have to add an extra div which clears all the floats.

Code: Select all

<div class="container">
  <!-- content and floating elements here -->
  <div style="clear:both;"></div>
</div>

To avoid the text going under the image, also place it inside a floating div.

A Solution that I have used for this exact problem is to give the image a large margin-bottom

100px or whatever you need. That will fill up that space on the left under the image, force the div down and keep the text on the right.

Many thanks - solved with the clearance div and double floaters!