幅を可変にし2段組をCSSで組む場合どうしたらよい

質問

下のような表をCSSでtableを使わずに組むにはどうしたらよいのでしょうか。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿__
|　　　　　　　　　　　　　 　|　　　　　　　　 　 　　|
|　文字列AAAAAAAAA |　____________　　_________ |
| | | | | | |
| 文字列BBBBBBBBB | |★img | |★img | |
|＿＿＿＿＿＿＿＿＿＿|___|＿＿_＿|__|_________|__|

枠線がまがってしまいましたが、上記の位置関係で実施にはborderはありません。
この文字列AAAAAAAAAAAはページによって可変なので幅を指定したくありません。
文字列のすぐ後ろぐらいにイメージが来るようにしたいと思います。

左側のタイトルが2行の横にイメージがきます。
イメージは文字列Bの下のラインにそろうように
配置したいのです。いくつか試したのですが、
imgが下方向にいかないのと、 文字列BBBBBBBBBBBBBBB 部分の左側の幅が可変にできません。何か良い方法はないでしょうか。

<h1 id="title">
<ul id="ultitle">
<li class="gloap">文字列AAAAAAAAAAAAAAA </li>
<li>文字列BBBBBBBBBBBBBBB </li>
</ul>
</h1>
<p id="icon"><img 1><img 2></p>

のようにしました。CSSを色々書きましたが上手くいきませんよろしくお願い致します。

上の表が崩れてしまいましたので、イメージ画像を添付します。
よろしくお願い致します。

回答No.3

ORUKA1951

<!--
/* ナビ画像も伸縮させる */
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:100%;min-width:480px;max-width:900px;margin:0 auto;}
div.header{position:relative;}
div.header h1,div.header div.abstract{
＿margin-right:30%;/* 幅固定ならpxを */
}
div.header div.nav{
＿position:absolute;top:0;right:0;
＿width:29%;/* 幅固定ならpxを */
＿height:100%;
}
div.header div.nav ul{
＿position:absolute;
＿bottom:0;
＿width:100%;
}
div.header div.nav ul,div.header div.nav ul li{display:block;list-style-type:none;margin:0;padding:0;
}
div.header div.nav ul li{float:left;width:49%;position:relative;margin-left:1%;}
div.header div.nav ul li img{display:block;width:100%;height:auto;}
/* 色分け */
body{background-color:gray;}
div.header,div.footer{background-color:silver;}
div.section{background-color:white;}
div.header div.nav{background-color:yellow;}
-->

基本は、No.1の考え方と同じです。