Floating Images with Inline Styles

There is a wide range of webmasters in AYSO and I want to get a feel for what we have out there. I know we have quite a few of our websites on the Clubspaces platform. Do you prefer to use the design view or the HTML view when editing pages? Sometimes it’s easier to edit the page in HTML mode to get things to look exactly the way you want - the design view can be a little tricky to format things specifically. 

Styles are one way you can format your text and images. Most styles should go in the header of the HTML page. However, if you have a Clubspaces site, you don't have access to the page headers, so we use what are called inline styles. Inline means that the style is applied directly to the element instead of in a separate location. Here's one way to format your page with styles (CSS) to get a nice format:

FLOATING IMAGES

Say you have an image and you want your text to wrap around the image; similar to a magazine or newspaper style. You could use a table to format it, but it's not always precise and can get messy. Styles can make this work very easily with just a few simple words.

Here is a basic image tag:  <img src="myimage.jpg">

To float this image, you would add the BOLDED RED text to the tag above:

<img src="myimage.jpg" style="float: right;">

This would put your image on the right side of the page with your text wrapped around it. You can also tell it to float left or float center. Floating it to the left will align it on the left side of the page and float center will align it to the center of the page. The text will wrap around the image. 

If you have a paragraph of text you want to wrap around the image, it is best to put the image BEFORE the text to make sure it aligns correctly. If you put the image in the middle of the text block, it will show up in the middle of the text block.

Have a question? Please leave a comment!