Seek suggestions on layout technique

In ASCII-art, this is what I want to achieve:

Relatively higher on the page, three images like this:

----   ----
|    | |    |
|    | |    |
|    | |    | ++
----   ---- ++

and, lower on the page, three like this:

----   ---- ++
|    | |    | ++
|    | |    |
|    | |    |
----   ----

      ^
      |
      |
 page horiz.
 centerline

--where each of the four larger rectangles represents a playing card image, and each of the the two smaller "+"-built rectangles represents a much smaller image. The ASCII-art is likely to be a bit off unless your font metrics match my text editors'; I've attached a small screen shot portion that's much better than the ASCII and that's a sample of the lower set of three images. Note that the page horizontal centerline should run between the two adjacent playing cards.

I now have this UiBinder layout for the lower images (the higher ones are the same except swap the strings "top" and "bottom"):

<div class='{style.centerer} {style.relative}'>
    <div class='{style.centered}'>
        <g:Image ui:field='card1' resource='{res.card1}' />
        <g:Image ui:field='card2' resource='{res.card2}' />            
        <g:Image ui:field='dealer' resource='{res.imgDealer}' addStyleNames='{style.top}' />
    </div>
</div>

where the CSS is:

/* The following two classes are derived from */
/* http://stackoverflow.com/a/10797328/1121892 */

/* Child of this element is class="centered" */
.centerer {
    text-align: center;    /* horizontally */
}

/* Parent of this element is class="centerer" */
.centered {
    display: inline-block;
}

.top {
    position: absolute;
    top: 0;
    width: 100%;
}

The problem is positioning the smaller "dealer" images. In Firefox 20 they display as intended, but in OmniWeb (Safari-like), Chrome, and IE 10 they  displace horizontally from the intended position to overlay the left corner of one of the larger rectangles (different larger rectangle in different browsers).

Currently my app uses only one overall HTMLPanel and all my layout within is by HTML/CSS. This is my first GWT project and I think maybe it's time I started using panels for layout but I don't know exactly how to handle this case to achieve browser-independence, if that is possible.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.