Lesson 12: How to leave space beneath floating block elements

If you have trouble with floating block elements having no defined height there is a neat solution to it.


This picture is inside a block which is floated left. Any text that follows will just sit next to it.

If you want the text after the image to come out beneath it you don't want to add loads of <BR /> tags to artificially line things up. A more certain and clean approach to giving the element some height is as follows:

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


Here is the picture again...

...but with the extra empty div below it to give it some fake height.

Lesson 11: How to centre (center!) your Flickr Slideshow

I don't know much about iframes but I figure they behave like block elements. If you put a <div> wrapper around it and center that, you should be in business.

Take a look at this example from the Impington Swimming Club website's results page. The entry from 26th November has a centered flickr slideshow and the one from September 2006 has a standard left justified one. All of these entries are fed from Blogger.

Here's the code...

<div align="center">
<iframe align=center src=http://www.flickr.com/slideShow/index.gne?tags=isc_barnet1500_06 frameBorder=0 width=450 scrolling=no height=500></iframe>
</div>


Here's how it looks but note that, you will probably not notice much difference looking at the code on this blog since the margins are controlled very well by other aspects of this page's template style sheet. Best to take a look at the Impington website. Actually, I've made the width 450 instead of 500 now so it may show up.