Images and text side by side

A website that has many pictures and not only text comes alive and is more appealing. It is a good idea to add images here and there, throughout your website. Alternate positions too so that they sometimes appear on the left and other times on the right. Small pictures, rectangular ones, wide ones - use all types.

Normally, tables are the easiest way to position pictures since you can make sure they end up where you intended and look the same in all web browsers. The fact is (to the dismay of all web designers) that web browsers do things differently and interpret the underlying code slightly differently which changes the appearance of a website. This is why a website may look completely different in Internet Explorer 7 compared with Internet Explorer 8. (It’s high time to upgrade if you still use Internet Explorer 6. Due to recent advances, it can no longer handle Internet features and functions.) There are many other browsers besides Internet Explorer, including Firefox, Safari, Chrome, Opera, etc.
The most common web browsers today are Internet Explorer 8 (version 9 is advancing) and Firefox. Generally speaking, Firefox follows HTML standard while Internet Explorer can get a bit creative. However, if you place images and text in tables, the end result is usually the same in both.

The best solution is to make several small tables and insert them where you want the picture to appear. When you add the picture, insert a table with 3 columns and 1 row. The column in the middle is only there to ensure enough space between the text and the picture. After that, alternate between placing images on the right or on the left.

Below is an example of a text and image solution. A gray border surrounds the table cells so you can see the position of the tables.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut eros sit amet neque egestas vehicula quis eu lacus. Vivamus quam magna, ornare sit amet feugiat in, eleifend non dui. Suspendisse potenti. Pellentesque ut tellus no eros quis rhoncus eu tortor imperdiet commodo.
  Maecenas sit amet dolor leo. Pellentesque vel nibh nulla, at mollis neque. Nulla sem augue, hendrerit vitae molestie rhoncus, malesuada sed ante. Proin orci elit, vestibulum tempus luctus eget, tempor sed tellus. Mauris placerat est non purus porta feugiat. Nunc sapien leo, mattis quis rhoncus eu, hendrerit non mi. Praesent id lobortis magna. Nam non velit at eros pellentesque pretium. Nunc vel lorem sit amet tortor imperdiet commodo eget ac velit. Morbi a arcu mi, in semper augue. In molestie congue nibh, a interdum erat tempor quis. Sed aliquet fringilla eros, a vestibulum lorem aliquet at. Nam tellus nisi, venenatis ut bibendum sed, consectetur vel sapien. Pellentesque habitant morbi sit tristique senectus et netus et malesuada fames tempus amet sollicitudin ac turpis egestas malesuada.
Praesent id lobortis magna. Nam non velit at eros pellentesque pretium. Nunc vel lorem sit amet tortor imperdiet commodo eget ac velit. Morbi a arcu mi, in semper augue. In molestie congue nibh, a interdum erat temp sollicitudin tempor quis habitant morbi tristique senectus.
Sed aliquet fringilla sed eros , a vestibulum lorem aliquet at. Nam tellus nisi, venenatis ut bibendum sed, consectetur vel sapien. Pellentesque habitant netus morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel augue eleifend est tempus velit sollicitudin. Curabitur porttitor cursus sem sit sagittis purus porta feugiat.  

Etiam porta auctor egestas. Aliquam id quam et justo iaculis porta. Integer non ante lobortis sem feugiat tempor. Sed vehicula lacus ut ligula pellentesque vitae hendrerit ipsum porta. Fusce fringilla lorem quis mauris pharetra imperdiet. Aenean sit amet justo ante, in purus consectetur metus. Donec in ligula sit quis ligula mattis faucibus  praesent id lobortis magna.

This is the same example as above but without a border around the cells, so that you can see more clearly how it all comes together. This is a good trick for coaxing the brain and eye into reading a lot of text. If there are no pictures and all you see is a page full of text, the brain shuts down and you move on to the next page without having read anything. A picture, however, arouses curiosity, is pleasing to the eye and makes us want to linger. Before you know it, you’ve read the text too.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut eros sit amet neque egestas vehicula quis eu lacus. Vivamus quam magna, ornare sit amet feugiat in, eleifend non dui. Suspendisse potenti. Pellentesque ut tellus no eros quis rhoncus eu tortor imperdiet commodo.
  Maecenas sit amet dolor leo. Pellentesque vel nibh nulla, at mollis neque. Nulla sem augue, hendrerit vitae molestie rhoncus, malesuada sed ante. Proin orci elit, vestibulum tempus luctus eget, tempor sed tellus. Mauris placerat est non purus porta feugiat. Nunc sapien leo, mattis quis rhoncus eu, hendrerit non mi. Praesent id lobortis magna. Nam non velit at eros pellentesque pretium. Nunc vel lorem sit amet tortor imperdiet commodo eget ac velit. Morbi a arcu mi, in semper augue. In molestie congue nibh, a interdum erat tempor quis. Sed aliquet fringilla eros, a vestibulum lorem aliquet at. Nam tellus nisi, venenatis ut bibendum sed, consectetur vel sapien. Pellentesque habitant morbi sit tristique senectus et netus et malesuada fames tempus amet sollicitudin ac turpis egestas malesuada.
Praesent id lobortis magna. Nam non velit at eros pellentesque pretium. Nunc vel lorem sit amet tortor imperdiet commodo eget ac velit. Morbi a arcu mi, in semper augue. In molestie congue nibh, a interdum erat temp sollicitudin tempor quis habitant morbi tristique senectus.
Sed aliquet fringilla sed eros , a vestibulum lorem aliquet at. Nam tellus nisi, venenatis ut bibendum sed, consectetur vel sapien. Pellentesque habitant netus morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel augue eleifend est tempus velit sollicitudin. Curabitur porttitor cursus sem sit sagittis purus porta feugiat.  

Etiam porta auctor egestas. Aliquam id quam et justo iaculis porta. Integer non ante lobortis sem feugiat tempor. Sed vehicula lacus ut ligula pellentesque vitae hendrerit ipsum porta. Fusce fringilla lorem quis mauris pharetra imperdiet. Aenean sit amet justo ante, in purus consectetur metus. Donec in ligula sit quis ligula mattis faucibus  praesent id lobortis magna.