I am changing a site from table based to CSS and need some advice.

The link for the table based layout is here the link for the CSS that I am working on is here. The issue I have now, is that if the text in the title of the article needs to go to the second line, I can't figure out how to get it to line up to the right of the date. That was easy in the table. Any suggestions on how to do the same in CSS?

These items are added to on a pretty regular basis, especially on another page, the new items go on the top of the list. I am using an UL to hold the items, is that the best way to handle this?

Thanks

If you set .blogs li a to display:block, it will solve that problem. It will, however, force the link to a line below the small date.

I tried your suggestion, but that is not how the client wants the data displayed.

So, if I want to keep the format I have, I should continue to use a table to display the data? There is no CSS way to do it?

is there any CSS way to do it ??

It looks like you need to take the date out of the <li> for it to look like the table version

So, if I want to keep the format I have, I should continue to use a table to display the data? There is no CSS way to do it?

You don't need a table for that. There are a couple of other ways to do that, like putting the date into a separate <li> and floating the list items next to each other.
OR, you could use a Definition List (DL), in which case it would look something like this:

<dl>
<dt>date</dt><dd>item title</dd>
<dt>date</dt><dd>item #2 title</dd>

</dl>
Float the <dt> left and style it as you have in the <span> you have now.

As mentioned above the code would be something like:

<ul><li style="float: left; padding-right: 20px">5/12/09</li><li style="float: left">Test Link</li></ul>

Thanks for the imput, I tried the DL but that was not perfect.

Working on the date in one li and the text in another. Working fair but I have a problem with the last item in the list.

Can't find what I am doing wrong there.

I really am having a hard time believing that doing this in CSS is the best way to go about it. A table for this was done in just seconds. I will keep hacking away at it.

There are many ways, but to give in to tables is counter-productive. There is no question that CSS has a definite learning curve, you can't master it in days or even weeks.

Looking at your code, you've got a lot of incorrect coding - you cannot put spans around list items. You're also using a lot of spans that simply aren't necessary.

This DL works:

 <dl class="blogs">
    
   <dt class="noClear">4/30/09</dt><dd><a href="http://thehill.com/leading-the-news/ethics-panel-pressured-to-launch-pma-probe-2009-04-30.html" title="Ethics" target="_blank">Ethics panel pressured to launch PMA probe against Murtha</a></dd>
    
  <dt>4/26/09</dt>
    <dd><a href="http://www.redstate.com/moe_lane/2009/04/26/best-served-cold-watch-obama-abandoning-murtha/" title="Best Served Cold" target="_blank">Best Served Cold Watch: Obama abandoning Murtha</a></dd> 
    <dt>4/23/09</dt>
    
    <dd><a href="http://www.redstate.com/brianfaughnan/2009/04/23/your-stimulus-dollars-at-work/" title="Stimulus" target="_blank">
    Your Stimulus Dollars at Work</a></dd>
      
    <dt>4/13/09</dt>
    <dd><a href="http://michellemalkin.com/2009/04/13/8-million-radar-to-nowhere/" title="Radar to nowwhere" target="_blank">Michelle Malkin: $8 million
    radar to nowhere</a></dd>
    
    
    <dt>4/10/09</dt>
   <dd><a href="http://www.digitaljournal.com/article/270778" title="Drained" target="_blank">John Murtha could get 'drained from the swamp'</a></dd>
    
    </dl>

with this CSS:

dl.blogs dt{
        font: 12px bold oblique Arial, Helvetical, sans-serif;
        color: #000;
        float: left;
        line-height: 1.5em;
        clear:left;
        padding-top: 4px;
        width: 10%;
}

dl.blogs dt.noClear{
    clear:none;
}

dl.blogs dd{
    font-size: .9em;
    float: left;
    padding-left: 4px;
    margin: 0;
    width: 80%;
}

The .noClear class on the first DT is necessary because you don't need a clear on the first item, only on successive items.

The widths on the dt and the dd are necessary first of all because they are floated (floats need widths), and second of all, it keeps really long lines wrapping where you want them and not forced down below the dates.

Thank you for the detailed answer. I did not clear the first item when I tried the DL. That's when I started adding all of the spans.

I have been using Dreamweaver CS4 as an editor, and I have been using the built in validation tool as I went along. It does not work consistantly. It failed to indicate that I was inserting spans where they should not be used. Found all of the errors when I used the online tool at w3c.

So much to learn. Back to the books.

I do very much appreciate your help.

You're welcome