Centering vertically within a floated div?

I’m failry new to CSS, just read through Eric Meyer’s Definitive Guide and browsed in a few other places.

I’m building a site for a graphic designer friend.

I had created a layout based on absolute positioning, but realised that it would be better to use floated elements to solve a problem with fonts forcing areas to overlap when resizing a window.

I previously had this arrangement to center a large image both vertically and horizontally within a div, basing the markup & styles on this [URL=”http://www.w3.org/Style/Examples/007/center-example.html”]http://www.w3.org/Style/Examples/007/center-example.html[/URL]

It’s clearly a horrible case of div-itis… 😮

div#viewing {position:absolute;top:0;right:0;bottom:0;left:24%;}
div#outer {display:table;width:100%;height:100%;}
div#inner {display:table-cell;vertical-align:middle;}
img.fullimage {display:block;min-width:100px;width:512px;margin-left:auto;margin-right:auto;}

<div id=”viewing” >
<div id=”outer” >
<div id=”inner” >
<img class=”fullimage” href=”…” alt=”…” />
</div>
</div>
</div>

really ugly but it worked, the problem is I have now changed the style:

div#viewing {[COLOR=”SeaGreen”]float:right[/COLOR];min-width:77%;}

and this breaks the vertical centering.

Can anyone help?

Thanks

Also in #CSS _↴