The first issue is that the container div does not take notice of the child div elements in determining height so the height is not adjusting.
The second is the caption under each thumbnail. I try to get these to center below the image but just can’t get them to move at all. Please note the borders on the p tags are there just to show the width of the block whilst I try to work with this.
Whenever I add an additional news item the Twitter box drops by roughly the same amount, I assume the position is based on the height of the content on the left but not sure how I “decouple” them if it is at all possible.
OK, everything is pretty much done other than one final thing that’s bugging me. I cannot seem to be able to center the thumbnails in the container div. Any thoughts please anyone?
Here’s one way, combined with suggested alternative markup.
As the purpose of the thumbnails is to provide a list of links, swap the .float divs and the #collections_box div for an unordered list. Give the list and anchors a fixed width.
The img elements need to be closed for XHTML i.e end with /> and including image width and height attributes is advisable. I hesitate to specify font size in pixels, but will skip that aspect for now.
The “Collections” heading would best be a heading element with text, using an image replacement technique to overlay it with the image of text.
Give the body tag an id. This allows you to target page-specific styles to common elements, such as headings, without needing to apply extra ids or classes to them. In this case it’s used to target the h1.