Question

I have the following code which is created with a datalist control:

http://jsfiddle.net/vmE2E/1/

But i am unable to float the to ULs side by side with padding in between.
Please can you help?

edit: added code

<span style="display:inline-block;background-color:Transparent;border-color:#404040;border-style:None;" id="DataList1"><span style="color:Transparent;background-color:Transparent;">

                <ul class="latest-posts">
                   <li>
                    <a href="http://www.site.co.uk/blog/post/using-jquery.aspx">
                        using jquery<br>
                    </a>
                    </li>
                </ul>

            </span><br><span style="color:Transparent;background-color:Transparent;">

                <ul class="latest-posts">
                   <li>
                       <a href="http://www.test.co.uk/First-Blog-Post.aspx">
                        First Blog Post<br>
                    </a>
                    </li>
                </ul>

            </span></span>

css

ul.latest-posts
{
    width:500px;
    border:1px solid black;
}


ul li.latest-posts

{
    float:left;            
}

Answer 1

see fiddle for code and demo

Fiddle: http://jsfiddle.net/vmE2E/2/

Demo: http://jsfiddle.net/vmE2E/2/embedded/result/