レスポンシブな段組みで右端のアイコンだけ固定したい

Question

とあるテーブルをいくつかのブロックに分けて、横幅にゆとりがある場合段組みになるようにしたいのですが、テーブルの右横に設置したアイコンが段組みが変わってもついてくるようにしたいです。

…と文字で書いてもわかりにくいですね。

このようにTableAとTableBはレスポンシブに段組みをかえつつ、iconはTableAとTableBを一塊とした右肩にくっついてほしいのです。

そこで、

<div style="white-space:nowrap;">
  <div style="white-space:normal;">
    <table style="display:inline-block;">
      （TableAの中身)
    </table>
    <table style="display:inline-block;">
      （TableBの中身)
    </table>
  </div>
  <img src="icon.jpg">
</div>

みたいにしたらいい感じかな、と思ったのですが、ブラウザを縮めていくと、TableAとTableBは縦に並ぶものの、iconがTableから離れたうえに右端に少しはみ出るようになってしまいます。

どんなCSSを書いてあげれば期待したレイアウトにできるのか、識者の方々、ぜひお知恵をお貸しください。

Answer 1

imgの階層を変えています。

<div>
  <div>
    <table>
      <tr><td>（TableAの中身)</td></tr>
    </table>
    <table>
      <tr><td>（TableBの中身)</td></tr>
    </table>
    <img src="icon.jpg" />
  </div>
</div>

div div {
  position: relative;
  /* icon size */
  padding-right: 64px;
}

div div:after {
  content: '';
  display: block;
  clear: both;
}

table {
  width: 25em;
  height: 10em;
  float: left;
}

img {
  /* icon size */
  width: 64px;
  height: 64px;
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
}

Comments

[Marbow]

回答ありがとうございます。
カンペキでございます。

imgのcssで左右autoなのにどうしてちゃんとくっついてくるのかまだ理解できてませんが、希望通りの動作なのでOKです。
このへんは追々学習していこうと思います。
本当にありがとうございました。

Answer 2

一番外のdivに

#box {
  position:relative;
  padding-right:icon分px;
}

imgに`

#box img {
  position:absolute;
  right:0;
  top:0;
}

でいけませんか？

Comments

[Marbow]

早速の回答ありがとうございます。
試してみましたが、iconが「ブラウザの」右肩にきれいにくっつきました。
残念ながら私の期待している動作とは少し違いました。
これはこれで別なシーンで使えると思うので、参考にさせていただきます。
ありがとうございました。

[LibertyBell3]

あぁ、そういうことですか。
一番外のdivに、display:inline-block;でどうでしょう？

[Marbow]

やってみましたが、初期状態とあまり変わらないようです。

2番目のdivに display:inline; とすることで、少し近づきました、というか、普通にBOXが3つ並んでるのと変わりなさそうです。
やはりJavascript(or jQuery)に頼った方がよいのでしょうか。