Translate a <table> to <div>s

Question

Hi,

I have the following:

<ul style="width: 300px; list-style-type:none">
    <li>
        <table style="width:100%" border="0" cellpadding="0" cellspacing="0" summary="" >
            <tr>
                <td valign="top"> 
                    <img src='..' width='60px' height='50px' />
                </td>
                <td valign="top" style="padding-left:8px">
                    <p>Text here. Use all available left-over width, but stay in our own column. Expand content down vertically if required.</p>
                </td>
                <td valign="top">
                    <img src='..' width='12px' height='12px' />
                </td>
            </tr>
        </table>
    </li>
</ul>

I've been trying to rewrite this using divs. Is it possible? I wanted to rewrite using divs in hopes that it'd be less html produced by my page, especially if I have like 100 li elements as above.

So the question is, can I get the same layout above, using just divs, and not a table?

Thanks

------------------------ Update ----------------

This is as close as I can get, but the col2 text will wrap under the col1 image if the text is too long. Is there a way to get it to just stay within the confines of its own column, or make the image in col1 block any content from going below it?:

<li>
  <img src='na' style='float:left; position:relative; width:70px; height:44px; display: block;' />
  <span style='float:right; background-color: crimson;'>x</span>
  <span style='display: block; font:14px; padding-left: 10px;'>Title which can be really long and obnoxious for formatting I suppose. Carry on more and more. You would think this would be really simple to do with divs.</span>
  <div style='clear:both'></div>
</li>

Answer 1

You sould look at the css box model: http://www.w3.org/TR/CSS2/box.html

I don't understund what you need, but i think that the HTML should be:

<p style="width: 300px">Text goes here, it will grow vertically if not enought horizontal space</p>

Answer 2

Here's a start... 300px total left col: 60px right col: 12px middle: 228px fixed column widths

#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 300px;   
}

#header {
margin: 0 0 15px 0;
background: yellow;
}

#side-a {
float: left;
width: 60px;
}

#side-b {
float: right;
width: 12px;
}

#content { 
float: left;
width: 75%;
}

#footer {
clear: both;
background: #A2A2A2;
}

HTML code

<div id="wrapper">
<div id="header">
    HEADER
</div>
<div id="container">
    <div id="side-a">
        SIDE A
    </div>

    <div id="content">
        CONTENT
    </div>

    <div id="side-b">
        SIDE B
    </div>
</div>
<div id="footer">
    FOOTER
</div>
</div>

Answer 3

I used this code and I can't see the difference in Opera 10.6

    <li>
        <div id="cont" style="position:relative;">
            <div style="width: 60px; height: 50px;float: left;"><img src="" alt="Image" style="width:60px; height:50px;" /></div>
            <div style="padding-left:8px; float:left; width:220px;"><p>Text here. Use all available left-over width, but stay in our own column. Expand content down vertically if required.</p></div>
            <div style="width: 12px; height:12px; float:left;"><img src="" alt="image" style="width:12px; height:12px;" /></div>
            <div style="clear:both" />
        </div>
    </li>