centering a div on a page with a RHS image

[majo]

Hi all!

I have a page with a menu at both the top and LHS.
(Actual page content obviously appears in the remaining page space.)

At the top of this content space, I have a little quotation (that is different for each page). I've made it about 80% wide of the page width which looks nice and doesn't interfere with the LHS menu.

The quote div is centered by the standard accepted CSS method of:
margin-left: auto;
margin-right: auto;

Visually it looks like this:

| (top menu)
______|______________________________________________
|
LHS | | "Literary quotation" |
menu | <--- (width) -->
|
|
|
| (rest of actual page content)
. .
. .
. .


Okay, so now I'd also like to have a little graphic at the top of each page as well, on the far RHS.

However when I float this image right, the above mentioned page-centered quotation alongside it, now tends to overlap it.
If I change the margin-right: on my quote div from auto to a width appropriate to compensate, I now lose the centering of the quote (if I for e.g.: expand the browser page to full screen)

So my question is: how might I accommodate my new RHS image graphic , and have my quotation div centered in the remaining page space?
(i.e. space to the right of the LHS menu and left of the image)

Visually, this is what I'd like:
| (top menu)
______|______________________________________________
| __________
LHS | | "Literary quotation" | | |
menu | <--- (width) --> | (image) |
| -----------
|
|
| (rest of actual page content)
. .
. .
. .

[iLLin]

<div>
<div style="float: right"><img src="" /></div>
<div style="text-align: center">Quote</div>
</div>


That should work.

[majo]

okay. I actually forgot to mention that my "quote div" is actually a <DL> with a <DD> for the quote and a <DT> for the author of the quote.

However, enclosing the quotation within a div along with the graphic sounded a sensible way to proceed, so I've been playing around with that.

Unfortunately the results have been better but now I have a different problem.

Initially, I kept getting my page's text content which was supposed to appear after the adjacent quote and image, wrapping around the LHS of the quotation and appearing above it.

So as per this page (http://www.cs.hmc.edu/~mbrubeck/clear-after/), I've gone for the "spacer div" technique to both completely enclose the quote & image, and then clear the floats.

So here is what I have now:
- a contentheader <div> - which contains the quote and the image
- the epigraph <DL> - which is the quotation and author
- the figuretitle <div> - which contains the page image graphic floated to the RHS

Here is the relevant HTML:
<div id="content">

<div id="contentheader">
<div class="figuretitle">
<p><img src="Blog.jpg" width="67" height="81" alt="pen writing in diary" title=""></p>
</div>

<dl class="epigraph">
<dd><q>Writing is a socially acceptable form of schizophrenia.</q></dd>
<dt> <a title="Wikipedia entry for American Author and Editor, E. L. Doctorow" target="_blank" href="http://en.wikipedia.org/wiki/E._L._Doctorow">E. L. Doctorow</a></dt>
</dl>
</div>{content div not closed because actual content for the page appears hereafter}

and the CSS is:
#content {
width: auto;
margin-left: 8.8em;
margin-top: 0;
padding-top: 0;

font-size: 0.90em;
line-height: 140%;
color: #E7EAC6;
font-family: "Trebuchet MS", Calibri, Arial, Verdana, Corbel, "Arial Narrow", sans-serif;
}


#contentheader {
width: 100%;
margin: 0 0 0 0;
border: 1px solid purple;
}
#contentheader:after {
content: "\0020"; /* space character. Empty double-quotes could be used as well */
display: block;
height: 0;
line-height: 0px;
clear: both;
border: 1px solid red;
}

div.figuretitle {
width: auto;
margin: -1em 0em 0em 0em;
padding: 0.3em;
border: none;
float: right;
border: 1px solid green;
}
div.figuretitle p {
text-align: center;
color: Gray;
line-height: 110%;
font-size: x-small;
font-family: Verdana, serif;
text-indent: 0;
}
div.figuretitle p {
margin-top: 0em;
}
.epigraph {
width: auto;
margin-top: 1.8em;
margin-right: auto;
margin-bottom: 2.5em;
margin-left: auto;
padding-bottom: 1.5em;
max-width: 999px;
border-bottom: 1px solid #353535;
float: right;

font-family: serif;
}
dl.epigraph {
width: 80%;
padding: 0.5em 0.5em 0.5em 0.5em;
border: 1px yellow solid;
}
.epigraph dd {
text-align: center;
margin: 0;
}
.epigraph dt {
width: 100%;
text-align: right;
font-size: smaller;
font-family: sans-serif;
color: Gray;
}
.epigraph dt cite {
font-family: sans-serif;
color: Gray;
}
.epigraph dt:before {
content: "\2014 \0020"; /* em-dash + space character */
}


Now, the trouble is, that there is now this bizzare vertical space being added to the contentheader section as a result of the spacer div's display: block; entry. Removing this statement removes this excessive spacing, but of course, now defeats the purpose of having it in the first place (ie it doesn't work anymore).

You can see a full working example of a page of mine with this problem here (http://members.optusnet.com.au/metacortex/TMA-1/Blog/).There are borders around the divs for debugging purposes atm. The single CSS file for the whole site (obviously containing the above CSS extracts) is here (http://members.optusnet.com.au/metacortex/TMA-1/site/CSS/cyberpunk.css).

Is anyone able to give me a heads-up on what's going on and what I'm doing wrong??

(Thank you!)

P.S. Am using Firefox as my standard browser. Unsatisfactory viewing will currently result if IE6 is used.

[jlhaslip]

http://jlhaslip.trap17.com/majo.html

Notice that the dl/dt/dd is now semantically correct.

[majo]

Gee, thank you Jim for going to so much effort on my behalf! Unexpectedly welcome. Your effort catalysed a couple of other approaches for me which I'm trying ut now.


The semantics of the DL as I've used them are not clear to me. Sure I've used them in reverse order (validates fine) but that was actually seemed to more correct to me (one author can have multiple quotes, therefore the author should seemingly be the DT)

[jlhaslip]

No problem. You are welcome.