Display message output in multiple columns

[reffik024]

I wrote the following code to display messages from the database. Currently it produces a long list, I'm trying to figure out how to break this list up into two columns to shorten the length of the page. Any help is appreciated!

    $output .= "<div class=\"selector\">\n";
    $output .= "<form method=\"post\">\n";
    if ($type == "new") {
        $output .= "<input type=\"hidden\" name=\"type\" value=\"new\">\n";
        $output .= getPhaseDD("phase", $phase) . "   ";
        $output .= "Day:" . getDayDD($day) . "   ";
        $output .= "Number:" . getNumDD($num) . " ";
    } else {
        $output .= "<input type=\"hidden\" name=\"type\" value=\"existing\">\n";
        $output .= "<input type=\"hidden\" name=\"phase\" value=\"{$phase}\">\n";
        $output .= "<input type=\"hidden\" name=\"day\" value=\"{$day}\">\n";
        $output .= "<input type=\"hidden\" name=\"num\" value=\"{$num}\">\n";
        $output .= "<div>Phase: {$phase}, Day: {$day}, Number: {$num}</div>";
    }
    if ($type == "new") {
        $output .= "<div><textarea name=\"msg\" rows=\"8\" cols=\"50\" id=\"msg\" onkeyup=\"javascript:countTXT(this, 'cnt', 160);\" onkeydown=\"javascript:countTXT(this, 'cnt', 160);\">" . stripslashes($msg) . "</textarea></div>\n";
        $output .= "<div id=\"cnt\"></div>\n";
    } else {
        $output .= "<div><textarea name=\"msg\" id=\"msg_{$day}_{$num}\" onkeyup=\"javascript:countTXT(this, 'cnt_{$day}_{$num}', 160);\" onkeydown=\"javascript:countTXT(this, 'cnt_{$day}_{$num}', 160);\">" . stripslashes($msg) . "</textarea></div>\n";
        $output .= "<div id=\"cnt_{$day}_{$num}\"></div>\n";
    }
    $output .= "<div>\n";
    if ($type == "new") {
        $output .= "<input type=\"submit\" name=\"create_btn\" value=\"Create\" class=\"create_btn\">\n";
    } else {
        $output .= "<input type=\"submit\" name=\"update_btn\" value=\"Update\" class=\"update_btn\"> \n";
        $output .= "<input type=\"submit\" name=\"delete_btn\" value=\"Delete\" class=\"delete_btn\" onclick=\"javascript:return confirmDelete();\">\n";
    }
    $output .= "</div>\n";
    $output .= "</form>\n";
    $output .= "</div>\n";
    if ($type == "new") {
        $output .= "<script type=\"text/javascript\">countTXT(document.getElementById('msg'), 'cnt', 160);</script>\n";
    } else {
        $output .= "<script type=\"text/javascript\">countTXT(document.getElementById('msg_{$day}_{$num}'), 'cnt_{$day}_{$num}', 160);</script>\n";
    }
    return $output;

[jcbones]

Assuming you don't use <IE10.

 

<style type="text/css">
.selector
{
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
}
</style>