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 http://www.w3.org/Style/Examples/007...r-example.html

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 {float:right;min-width:77%;}

and this breaks the vertical centering.


Can anyone help?

Thanks