Website Page Layout


Page layout can be achieved with the float attribute. It is possible to do page layouts with tables but tables were never designed to be used as a means to layout a page.

Below is a series of small images that are all designed to float to the left. In the WordPress Media Library I added these images and chose to align them at the left, as shown in the picture below. When the small images are added to the page, the HTML code shows that there is a class applied. The class is “alignleft”.

AttachmentDisplaySettings

All four images below are set to align to the left. The image above was set to align none.

Zoom_in

Yellow_pin

Warning

Upload

This is a paragraph that is placed just after the four small images, but does not appear under the four images. When you align images to the left, the next item in the document flow appears to the right of it, provided that there is enough space on the page to show it, otherwise it will appear below. So each image appeared to the right of the image preceding it. Even this paragraph you are reading appears to the right of the last image.

The question is how do you force the next image or text to appear at the left margin on its own “line”? The way to do this is to use the style attribute with item to be placed on its own line. Use style=”clear:both” as shown below.

<p style="clear:both">This appears on its own line</p>

Let’s do another example. Here are four more images, all of them have the “alignleft” class applied to them. This time however I changed the code in the third image to “clear:both“. This removes the floating affects coming from the previous image, allowing the third image to display on its own line. The inline (local) style overrides the style in the class “alignleft”. The code of the third image is shown below (except for all of the directory).

<img style="clear:both" src="http://porterwebsites.com/.../thumbsup.png" alt="thumbsup" width="24" height="24" class="alignleft size-full wp-image-2324" />

process

People

thumbsup

Accept

Leave a comment

Your email address will not be published. Required fields are marked *