Positioning and images?

  I've been experimenting with CSS for some time now. At first I was going
to "cut over" my site to using a HTML4/CSS version (instead of tables), but
I've found that practically no one can read it for a huge variety of
reasons.

  The problem I've discovered this time has to do with images. My pages
consist of two basic portions, a header area at the top, and a body area
below it. Both are DIV's. In the header portion I place the name of the
article (game title) and typically an image from the game.

  When I do this with tables, the upper potion (a cell) contains both the
title and the image. As a result the body appears below the header as
expected. Here is an example using the tables:

http://www.gamesoffame.com/space/spacewar.html

  When I do what seems to be the same thing using the DIVs as "cells", the
image runs out of the header area and over the body text - making it
unreadable. Here's an example:

http://www3.sympatico.ca/maury/games/space/spacewar.html

  Why does this happen? Since the image is a part of the upper DIV, why
don't the contents of the lower DIV (which starts with the HR and word
"history") get pushed down?

  Note that I'm not convinced this particular issue is a "bad" one, the
article is still readable in this case. I'd still like to know why it
happens though.

Maury

Received on Friday, 5 January 2001 13:00:56 UTC