HTML & CSS tutorial for Content Managers – Floating Images

Posted in Content Management,Website Design by Bridgeline Digital on August 13th, 2009

A content management system is an excellent tool for marketing and advertising teams, allowing content managers to add text, imagery, PDFs, and rich media to their website without an in-depth knowledge of HTML and CSS. But there will be a time when you really want to take over the page – to lay it out exactly how you want. Unfortunately for you, if there wasn’t a dedicated “page-template” created, you probably won’t be able to easily modify the layout of your page. Most content management systems, however, allow you to edit the HTML of your content directly. Take a look in your CMS controls, you’ll most likely see a source or HTML button. This will be the area where you can go the extra mile.

Floating and Styling Images

One style that’s popular is “floating” imagery, allowing text to wrap around it. While content management systems should have this built into their editing controls, it often might not “look right”. Maybe you want more space between the text and image. Maybe you’d like to see a border around that image.

Today we’ll float our fictitious research report cover on the left of our page with text wrapping around it. Make sure your image is sized correctly before you get started.

Example

Research Report CoverThe 2009 Acme Report provides insightful information regarding the current state of the Acme Corporation. The findings of this report lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin mattis imperdiet. Nunc quis diam at dui scelerisque volutpat. Aenean quam ante, laoreet non cursus semper, mollis ut velit. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis imperdiet lacinia. Sed sem elit, iaculis id porta in, lacinia nec turpis. Mauris ut dui purus. Sed commodo tellus a leo tincidunt in lacinia purus feugiat. Urabitur viverra, dolor quis pretium scelerisque, ipsum turpis viverra velit, et condimentum dui nulla sed metus discae.

HTML/CSS Code

<img style="float: left;" src="http://www.acme.com/images/report.gif" width="70" height="90" />

Note that we added some inline-CSS (style=”float: left;”) to our HTML snippet that outputs our research report image. It’s floating! But, we need a little more breathing room between the image and text. Let’s keep going.

Research Report CoverThe 2009 Acme Report provides insightful information regarding the current state of the Acme Corporation. The findings of this report lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin mattis imperdiet. Nunc quis diam at dui scelerisque volutpat. Aenean quam ante, laoreet non cursus semper, mollis ut velit. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis imperdiet lacinia. Sed sem elit, iaculis id porta in, lacinia nec turpis. Mauris ut dui purus. Sed commodo tellus a leo tincidunt in lacinia purus feugiat. Urabitur viverra, dolor quis pretium scelerisque, ipsum turpis viverra velit, et condimentum dui nulla sed metus discae.

HTML/CSS Code

<img style="float: left; margin-right: 15px; margin-bottom: 10px; border: 2px solid gray;" src="http://www.acme.com/images/report.gif" width="70" height="90" />

Now we have some breathing room with the two margin rules we added to the inline-CSS. We can even add colored borders directly to images using CSS.

Use these simple inline-CSS rules on your HTML to achieve page layout as you want. What are some other things you wish you could push your CMS to do?

Written by Marcel Moreau

5 Responses to “HTML & CSS tutorial for Content Managers – Floating Images”

  1. Becki Dilworth August 13th, 2009 at 3:57 pm

    Great tips Marcel. Sometimes it’s the tiniest details that make all the difference in adding polish and professionalism to a site.

  2. tinman September 1st, 2009 at 8:47 am

    Hi,
    thanks for the tips which seem to work very well in ie8. However in firefox 3.5 the text appears one line down from the top of the jpg. How do I line it up with the top of the pic in all browsers?

    cheers.

  3. Marcel Moreau September 1st, 2009 at 12:05 pm

    Tinman, I don’t seem to be having the issue you describe on FF3.5. Are you having this issue on your own example? Can you link to it? Some tips to try: 1) list the image first in the markup 2) make sure your line-height is not affecting the text

  4. tinman September 29th, 2009 at 9:32 am

    Thanks for replying Marcel. The incident occurs on the news page here..

    http://www.officialgunfans.co.uk/news.html

  5. tinman September 29th, 2009 at 9:43 am

    Looks ok in Opera also so it seems that only firefox version 3.5.3 seems to have a problem…

Add a Comment

Submit