try using a clearfix div like example below:
you can find that i use that solution on my website, viewing the source code: http://www.weblancer.eu
i hope help you
EVA PRIM WRITES—
CHOICES. ANARCHY. HYPOCRISY.
this section (shorts3) has been a nightmare. The buyshorts3 div will not format correctly; it was going under the text below, so I moved it above the text. my client will not like that as it is not consistent with other parts of the page.
Thanks for your help.
You're making it a nightmare because you're trying to layout a web page in the same way as you would approach a desk top publishing page.
You're trying to fit text in the spaces allocated on one big background image, this is never going to work successfully because everyone has their browsers set up differently.
You would be far better 'isolating' each book and eack books details in their own container. Yes you dont get the 'integrated runaround' look but what you do get is a webapage that is far better suited to more devices and far easier to manage in terms of producing.
At the moment you can come up with a number of 'hacky' fixes but you will never know how it really performs on a wider range of different set ups people use to view the page.
To illustrate what Osgood is saying, this is what your page looks like when text size is increased in browsers.
You're trying to precisely align text over this complex background image
which is like trying to nail Jell-O to a wall. It doesn't work.
My advice is to simplify your layout approach & use a less complex background-image that is able to repeat vertically. The book covers need to be inserted as separate floated foreground images. See example below.