I am currently working on a code block and I am trying to display two columns, one on the left and one on the right. However, the second column is appearing below the first one.
<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>