Align 2 columns of text links

I have this code in my block and i would like to have the two columns left and right . Now the 2-nd one is under the first column .

<style type="text/css"> 
    a img{border:none;}
    #planninglaunchbox
    {
        background:#f3f8e7;
        color:#1f1f1f;
        font:normal 11px Arial,sans-serif;
        margin:0 10px 10px 0;
        overflow:hidden;
        width:235px;
    }
        #planninglaunchbox .inner
        {
            padding:10px 0 10px 10px;
        }
        #planninglaunchbox a{color:#1f1f1f;text-decoration:none;}
        #planninglaunchbox a:active,
        #planninglaunchbox a:hover{text-decoration:underline;color:#579BC3;}
        #planninglaunchbox h3
        {
            color:#1f1f1f;
            font:normal 12px Georgia,serif;
            margin:0 0 5px;
            text-transform:lowercase;
            width:215px;
        }
        #planninglaunchbox h4
        {
            font:bold 12px Arial,sans-serif;
            margin:0 0 10px;
        }
        #planninglaunchbox ul
        {
            list-style:none;
            margin:0 0 5px;
            padding:0;
        }
            #planninglaunchbox ul.first{margin-right:10px;}
            #planninglaunchbox ul.first,
            #planninglaunchbox ul.last

        {
                float:left;
            }

            #planninglaunchbox ul li
            {
                background:none;
                margin-bottom:5px;
       开发者_如何学运维         padding:0;
            }
                #planninglaunchbox ul li img
                {
                    margin-right:6px;
                    vertical-align:middle;
                }
        #planninglaunchbox .seeall
        {
            clear:both;
            margin:0;
            padding:0;
            width:auto;
        }
</style>
<div id="planninglaunchbox">
<div class="inner">
<h3> Theme</h3>
<ul class="first">

!--Some links--  

</ul>




<ul class="last">

!--Some links--  


</ul>

</div>
</div>

Use float:left for the elements that you want to place side by side.

I like lists. They have semantic meaning as well.

<style>
ul {
    width:200px;
}

ul li {
    width:100px;
    float:left;
}
</style>

<ul>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
</ul>

With some spacing:

<style>
    ul {
        width:220px;
    }

    ul li {
        width:100px;
        float:left;
        margin-left:10px
    }
    </style>