I have something I wish to display like (simplified)

<div style="width:608px;">
<tr>
<td width=15 height=15>leftimage.png</td>
<td background=#000></td>
<td width=15 height=15>rightimage.png</td>
</tr>
</div>

But in CSS, I always seem to run into the background color issue. The .pngs have to show transparency. The issue is getting the middle layer to stretch via the width of the parent div as well. Either the background color spans everything, ruining my .pngs or it doesn't span dynamically. Tables would work, but I hate tables. I want fully semantic CSS that works with IE even.

The basic answer:

 
.container{width:608px; overflow:auto; background:transparent;}
 
<div class="container">
<img src="rightimage.png" style="width:15px; height:15px;" alt="alt text" />
<img src="leftimage.png" style="float: left; width:15px; height:15px;" alt="alt text" />
</div>

tim

Exactly -- no need for ugly tables

<div class="container">
<img src="rightimage.png" width="15" height="15" style="width:15px; height:15px;" alt="alt text" />
<img src="leftimage.png"  width="15" height="15"  style="float: left; width:15px; height:15px;" alt="alt text" />
</div>

Valid XHTML code.

Originally Posted by LadynRed

Exactly -- no need for ugly tables

The voices in my head told me otherwise...

Can I write like this?

.container{width:608px; overflow: auto; background:transparent;}
.img{width:15px; height:15px;}
 
<div class="container">
<img src="rightimage.png"  alt="alt text" />
<img src="leftimage.png" style="float: left; " alt="alt text" />
</div>