tableタグ使用

 
widthを固定値ではなく50%に設定

 

<table border="0" cellpadding="0" cellspacing="0" width="50%" height="100">
<tbody>
<tr>
<td><img src="e1.gif" width="20" height="20" border="0"></td>
<td bgcolor="#ffcfce" width="100%"></td>
<td><img src="e2.gif" width="20" height="20" border="0"></td>
</tr>
<tr>
<td bgcolor="#ffcfce"></td>
<td bgcolor="#ffcfce" height="60"></td>
<td bgcolor="#ffcfce"></td>
</tr>
<tr>
<td><img src="e4.gif" width="20" height="20" border="0"></td>
<td bgcolor="#ffcfce"></td>
<td><img src="e3.gif" width="20" height="20" border="0"></td>
</tr>
</tbody>
</table>

css使用

正確な物はできなかった。でも解ったことがあります。それはtableレイアウトとcssレイアウトの違いです。
tableレイアウトでは簡単に画面の大きさによって枠を自由に広げることができます。
もちろんcssでも「%」での指定は可能です。ただし、自由度が少ないのです。
例えば上のような画面幅50%の四角い箱ですが真中の部分に100%と入れてあれば最大の幅まで自動で大きくなります。正確な数字は必要ありません。
しかし、css　－　float　でのレイアウトではそれが必要になってきます。widthを指定しないといけないからです。
上の箱を作りろうと考えた場合、右のボックスwidth20px、左のボックスwidth20px、そして真中のボックスのwidthが必要です。
でも真中のwidth正確には表せません。（※小さい数字は指定できますがその場合は余白などが生じるため上の箱と同一ではありまん）
もう一つ大きな違いがあります。tableの場合、中に入っている要素が大きくなるとtable自体も大きくなります。しかし、cssのボックスの場合親のボックスから子のボックスがはみ出してしまいます。これによってレイアウトがくずれてしまうので正確な数字が必要になってきます。
逆に言うと%で指定するようなレイアウトで正確な物は作りにくいのです。
それにもう一つ、ブラウザによって解釈が大きく違います。ネットで色々調べましたがその通りにやってみてもできないものが多くありました。
同じブラウザであったとしても少しの間にちょっとずつ変更しているところからくるものだと思います。
今きちっと見えていたとしても近い将来レイアウトが崩れて見えることも十分考えられます。
cssによるキチッと決めたレイアウトはなるべくしないようにした方がいいようです。

キチッと正確ではないが近いもの
 

Internet Explorer の場合余白がでる。

<div style="width : 50%;">
<div style="width : 20px;height : 100px;float : left;">
<div style="width : 20px;height : 20px;background-image : url(e1.gif);"></div>
<div style="width : 20px;height : 60px;background-color : #ffcfce;"></div>
<div style="width : 20px;height : 20px;background-image : url(e4.gif);"></div>
</div>
<div style="width : 20px;height : 100px;float : right;">
<div style="width : 20px;height : 20px;background-image : url(e2.gif);"></div>
<div style="width : 20px;height : 60px;background-color : #ffcfce;"></div>
<div style="width : 20px;height : 20px;background-image : url(e3.gif);"></div>
</div>
<div style="height : 100px;margin-left : 20px;margin-right : 20px;">
<div style="height : 20px;background-color : #ffcfce;"></div>
<div style="height : 60px;background-color : #ffcfce;"></div>
<div style="height : 20px;background-color : #ffcfce;"></div>
</div>

 
全長が50%でなく真中のセルの部分が50%　［全長＝20px＋50%＋20px］

<div style="width : 20px;height : 100px;float : left;">
<div style="width : 20px;height : 20px;background-image : url(e1.gif);"></div>
<div style="width : 20px;height : 60px;background-color : #ffcfce;"></div>
<div style="width : 20px;height : 20px;background-image : url(e4.gif);"></div>
</div>
<div style="width : 50%;height : 100px;float : left;">
<div style="height : 20px;background-color : #ffcfce;"></div>
<div style="height : 60px;background-color : #ffcfce;"></div>
<div style="height : 20px;background-color : #ffcfce;"></div>
</div>
<div style="width : 20px;height : 100px;float : left;">
<div style="width : 20px;height : 20px;background-image : url(e2.gif);"></div>
<div style="width : 20px;height : 60px;background-color : #ffcfce;"></div>
<div style="width : 20px;height : 20px;background-image : url(e3.gif);"></div>
</div>

 
※　見た目だけを同じにするのであればボックスの数を少なくして画像を隅に配置するなどのやり方はあると思いますが除いています。