Wickham's HTML & CSS tutorial
Photo album structure
View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
problems 
warning: works in some situations or some browsers or needs care to display as you wish 
OK in Firefox, Safari, Opera, Google Chrome and IE
Photos without borders
1 Typical arrangement for a photo album
Photos often look better against a dark background as a light background causes glare which makes it hard to concentrate the eye on the photo.
The dark background-color would normally be for the whole page in the stylesheet, either in the style for the body or for a containing div.
Photos with a border
2 Typical arrangement for a photo album with picture frames.
The subtitles are in separate divs. They could be in the same divs as the photos but if one photo is higher than the other the comments will be out of line. Separate divs keep them in line with each other. The photo that is less high than the other will need a margin-top of half the difference in height to centralise.
A different background-color can be coded for the image padding between the photo and the outer edge of the frame.
The code for the photos is:-
<div style="background-color: #333333; padding: 25px 0 10px 0; color: #fff; border: 0;"> <!--containing div-->
<div class="noborder" style="float: left; width: 49%; text-align: center;">
<img style="width: 320px; border: 5px double #999; padding: 3px;" src="littleegret.jpg" alt="Little Egret">
</div>
<div class="noborder" style="float: right; width: 49%; text-align: center;">
<img style="width: 200px; border: 5px double #999; margin-top: 20px; padding: 3px;" src="images/redadmiral200x200.jpg" alt="Red Admiral butterfly">
</div>
<div class="fullwidth0pxhigh"> </div> <!--This forms a full width divider 0px high which clears the float of the previous divs. Clear: both; in the first following div often achieves the same result.-->
<div class="noborder" style="float: left; width: 49%; text-align: center;">
Little Egret
</div>
<div class="noborder" style="float: right; width: 49%; text-align: center;">
Red Admiral butterfly
</div>
<div class="fullwidth0pxhigh"> </div> <!--This forms a full width divider 0px high which drags down the containing div below the subtitle divs. See item 4 which does not have this.-->
</div> <!--end of containing div-->
Text-align: center; works with images as well as text.
Div layout for photos with a border
3 Example to show the typical arrangement of the divs and images in item 2 for a photo album with picture frames.
The containing div would usually be the body of the page or a large containing div for most of the page.
The gray divs are each width: 49%; float: left and float: right;
The images with pink padding are centralised by the text-align: center; in the gray divs.
There is a divider div above the azure subtitle divs. This full width divider 0px high clears the float of the previous divs and prevents a subtitle moving up into space below a smaller photo above. Clear: both; in the first following div often achieves the same result but in this case it doesn't because a clear: both in a div would only apply to width: 49% when it is needed for the full width.
Note that Firefox creates the pink background for the image padding and the border frame but IE leaves the border frame color the same as the gray div.
4 This is the same as the above example but shows the effect of leaving out the final divider div 0px high. The padding to the containing div starts below the images, not below the subtitle divs. Look at the border of the containing div which passes through the subtitle divs. The addition of the last divider div in items 2 and 3 drags down the containing div and its background so that the padding is below the subtitle divs.
Inner div for photos with a border
5 The same result as item 2 but using an inner div for the image.
The subtitles are in separate divs. They could be in the same divs as the photos but if one photo is higher than the other the comments will be out of line. Separate divs keep them in line with each other. The photo that is less high than the other will need a margin-top of half the difference in height to centralise.
A different background-color can be coded in the inner div containing the photo for the padding between the photo and the outer edge of the frame.
The code for the photos is:-
<div style="background-color: #333333; padding: 25px 0 10px 0; color: #fff; border: 0;"><!--containing div-->
<div class="noborder" style="float: left; width: 49%;">
<div style="width: 320px; border: 5px double #999; margin-left: auto; margin-right: auto;">
<img src="littleegret.jpg" alt="Little Egret">
</div>
</div>
<div class="noborder" style="float: right; width: 49%;">
<div style="width: 200px; border: 5px double #999; margin-top: 20px; margin-left: auto; margin-right: auto;">
<img src="images/redadmiral200x200.jpg" alt="Red admiral butterfly">
</div>
</div>
<div class="fullwidth0pxhigh"> </div> <!--This forms a full width divider 0px high which clears the float of the previous divs. Clear: both; in the first following div often achieves the same result.-->
<div class="noborder" style="float: left; width: 49%; text-align: center;">
Little Egret
</div>
<div class="noborder" style="float: right; width: 49%; text-align: center;">
Red Admiral butterfly
</div>
<div class="fullwidth0pxhigh"> </div>
</div> <!--end of containing div-->
Div layout for photos with a border
6 Example to show the typical arrangement of divs in item 5 for a photo album with picture frames.
The containing div would usually be the body of the page or a large containing div for most of the page.
The gray divs are each width: 49%; float: left and float: right;
The pink inner divs containing the photos are centralised with margin-left: auto; and margin-right: auto;
There is a divider div above the azure subtitle divs. This full width divider 0px high clears the float of the previous divs and prevents a subtitle moving up into space below a smaller photo above. Clear: both; in the first following div often achieves the same result but in this case it doesn't because a clear: both in a div would only apply to width: 49% when it is needed for the full width.
Note that Firefox creates the pink background for the inner div padding and the border frame but IE leaves the border frame color the same as the gray div.
Links open in a window on the same page without javascript or frames
7 All photos or images of products open in a window on the same page rather than opening a separate page and without using frames or javascript. It does not work in the Opera browser.
It seems best to have the link boxes below the image position because clicking a link makes the next image appear at the top of the window, so having the links underneath leaves them visible to click again.
View the page source code for the html code. The css styles are in the head section of this page's code.
Source: gaz545 WebDevForum 24/09/2006.
Links open in a window on the same page using an inline iFrame
8 See another method of linking photos in sequence on the same page using an iFrame as shown below:-
The code is:-
<p>
<iframe frameborder="0" width="322" height="255" style="margin-left: 214px;" src="iframephoto1.php" title="Photo 1">
<!--Alternate content for non-supporting browsers here-->
<noframes>
<p>This iframe contains iframephoto1.php</p>
</noframes>
</iframe>
</p>
The iFrame does obey the frameborder="0" code in IE and Firefox and will validate with a transitional Doctype (unlike the frameset Doctype when frameborder is used).
The page included in the iFrame initially is Photo 1 which has a dummy transparent image in place of the left arrow which is not required for the first file, but is replaced by a left arrow link in the file for Photo 2.
Make sure the iFrame is wide enough for the image and arrow images or a vertical scrollbar will occur. The image is 200px and the arrows are 31px plus margins each side of 10px so the total width is 200 + 51 + 51 = 302px. Although this was enough in IE6 and Firefox I found that IE7 was occasionally placing the arrows below the image, perhaps because it thought there was not enough width, and creating a vertical scrollbar to reach the arrows below so I increased the iFrame width to 322px to be safe.
Scroll box with icons and larger popup
9 This example shows a scrolling box on the left with icons which can be hovered to show larger popups in the center and the icons can be clicked to hold the popup; then others can be shown on hover without losing the one that was clicked. It may take a few seconds for a larger image to load before it will show.
Unfortunately the example isn't perfect. It works well in Firefox but not in other browsers. In IE7 and Opera the clicked image will stay visible as a popup but when you click the scrollbar to move it, the popup image will revert to the default image. In Safari an image that you click on won't hold the popup, it only shows a popup on hover.
This example works best if there is no scrollbar and all icons are visible without scrolling.
View the source file of this page to see the styles in the head section style tags and the body html code.
Large image with numbered button or icon links
10 This example shows a div box with a large initial image which can be changed by clicking one of the numbered buttons below. It's based on code from CSSplay. It works in IE, Firefox, Opera Safari and Google Chrome but in the last three it only shows the large popup on hover while IE and Firefox will hold the image after clicking the link.
See the CSS style code in the head section style tags under the heading "Large image with numbered buttons" where I have also shown instructions. It also needs the IE conditional comment.
I have shown one link as a small background-image icon which needs an extra style for a span tag. It looks odd at the moment because I only have one icon which is different from the initial image so when the page is first loaded the large image is not the same as the icon, but if you have all the buttons as icons it will look better.
The example above has two image sizes for the popups, landscape and portrait. If you have more different sizes, create more classes.
Notes
See w3.org's Box Model here.
View/Source or View/Page Source in browser menu to see all html code.
The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.
The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.
A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.
Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.
If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]>
<style type="text/css"> div { margin-top: 30px; } </style>
<![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]>
<link rel="stylesheet" href="ie6.css" type="text/css">
<![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).
When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.
© Wickham 2006