Blocks in margin layout in HTML and CSS

[onestrike]

My web page is a discussion of another document, page by page. I want to follow the structure of the original document (with headings, sub headings and paragraphs), but also have the page number (or page ranges) appear in a 120px margin, just to the left of the first paragraph on that page(s) that I am discussing.So far, I have roughly what I want. The main discussion is inside a DIV tag, with the "description". The page number marginalia is kept inside a DIV tag with the class "page".\[code\]<DIV CLASS="discussion"> ... <A NAME="Page3"></A> <DIV CLASS="page">Page 3</DIV> <P>Burble burble burble ... burble burble burble</P> ...</DIV>\[/code\]The CSS used is as follows:\[code\]DIV.page { border-style: solid; border-width:medium; float:left; position:relative; left:-100px; width:70px; padding:2px; }DIV.description { position:relative; left:100px; }\[/code\]The problem here is that wherever the page DIV appears, there is a gap between that DIV element and a portion of the P element - a chunk of whitespace. It seems as if the browser thinks that the page DIV element should be sitting in that space, so it is wrapping the text around where it thinks the DIV element should be.Add to that, the browser always should the horizontal scroll bar to scroll through the extra 100px of extra space it thinks it should add to the window.