Home/ Questions/Q 973953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T03:21:32+00:00

I have the following: <ul style=width: 300px; list-style-type:none> <li> <table style=width:100% border=0 cellpadding=0 cellspacing=0

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0