function is being placed wrong

I'm trying to test a function by placing it in a div. I've first created a testfunction which just return a random string. This i'm trying to show in a div in the resultfunction. It shows the string however it shows it at the top of the page instead of in the div? How can i fix this

functions:

function testfunction() {
    return "lol";
}


function resultpage() {



    $output = '';


            $output .= '<ul id="nav">';
       $output .= ' <li><a href="#part-1">League of Legends</a></li>';
        $output .= '<li><a href="#part-2">CS:GO</a></li>';
        $output .= '<li><a href="#part-3">Dota2</a></li>';
        $output .= '<li><a href="#part-3">Hearthstone</a></li>';
    $output .= '</ul>';
    $output .= '<div id="content">';
        $output .= '<div id="part-1">';

        echo testfunction();


        $output .= '</div>';
       $output .= ' <div id="part-2">';
       $output .= '     Ma deuxième partie';
       $output .= ' </div>';
       $output .= ' <div id="part-3">';
       $output .= '     Ma troisième partie';
       $output .= ' </div>';
    $output .= '</div>';




return $output;
}
add_shortcode('resultpage', 'resultpage');