How to Position Web Site Pictures Using CSS

Web Page Design Technique For Combining Text And Images

Aug 12, 2009

One of the advantages of customized web site design with HTML code is the accurate control of the appearance and position of pictures using CSS.

Pictures are an important part of modern media and web sites are no exception. However, throwing in images anywhere on a page is not really the answer as the pictures should complement and expand the words.

The subject and the placement of the picture must be relevant to the rest of the text, making the ability to control the picture’s position an essential element in web site design.

Image In The Text

Placing images in the associated text reinforces the relevance of the image to the text. The text flowing around the image heightens the association for the reader. Cascading Style Sheet (CSS) techniques offer an easy and efficient way for web designers to position images in web page text.

This technique is an application of the basic CSS container technique for web site design. Tables are a popular graphic design tool with web designers for controlling web page layout. Pictures and text are placed in the cells of a table structure that was originally intended to as structure for displaying numerical data rather than text and pictures.

Graphic designers using CSS for web site design rely on containers to control the position of items on web page. Web designers nest the picture container inside the main text container.

Creating a Container

The basis for the container technique is the <div> tag, used to define a division or a section in an HTML document. This allows the defined section of the web page its own properties. The default characteristics are inherited from the main style while the unique style elements are commonly defined in a separate CSS file and have an ‘id’ selector to identify unique styles in to the web page.

The picture container is nested inside a parent container so that the parent containers text wraps around the picture. This is of course providing the picture is sufficiently small enough to allow room for the text and picture. All the detailed specification of the container properties are in the CSS file, the sample code from the abouttas.com site is for a picture on the right of the parent container so the text flows around to the left side of the main page.

CSS file definition

This is the code in the CSS file for a picture container on the right of the page.

Id Name

First thing is the name, or id, where the # symbol indicates this is the start of the id, followed by the unique name. The name is up to the web designer; however, it is a good idea to give each CSS id a meaningful name. This one gives an indication of its purpose, a picture to the right of a page.

The name may unique but the main purpose of CSS is to reuse style specifications through related pages on a web site so graphic designers can use the same id to more than one picture. Ideally, all pictures with text wrapping to the left use the same id for a consistent style across the web site.

Detailed Design

Looking inside the curly braces, we find the detailed style specifications for the picture container:

Float: this s set to right. This positions or justifies the section to the right of the web page, the other values are left or none.

Margin: this sets the spacing between the outside of the picture container and the wrapping text and in this case uses pixels as the measurement.

Width: The auto value means the picture container will set its own width according to the widest content item. This is so the picture container is a general all-purpose box and can be used for different size pictures without any change in specification.

Padding: this is a form of internal margin giving a space between the content and inside edge of the container, one again this is set using the pixel measurement.

Position the picture by editing the section of the HTML code that includes the associated text. Insert the <div id = “picright”> ...</div> container at the point in the text for the top of the picture.

The text after the <div> container flows around the left side of the picture and then goes across the full width of the text container below the picture.

The article How To Apply Basic CSS To A Web Page provides a starting point for using CSS using in an external file, while W3Schools offer a complete reference on all CSS and HTML tags and attributes.

The copyright of the article How to Position Web Site Pictures Using CSS in Website Design is owned by Philip Northeast. Permission to republish How to Position Web Site Pictures Using CSS in print or online must be granted by the author in writing.