div border not wrapped the content css/html

Question

i have a div wrapper with border, but the border not wrapped the content and i don't know why.

Here my screen problem:

This is what i want:

Here my HTML-code:

<div class="event_area_table_termin">
                <div class="twelve columns">

                    <h3>Terminübersicht</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>Titel</th>
                                <th>Startdatum</th>
                                <th>Enddatum</th>
                                <th>Wiederholung</th>
                                <th>Art</th>
                                <th>Aktion</th>
                            </tr>
                        </thead>
                        <tbody>   
                            <tr><td>Abendmarkt Osnabrueck</td><td>11.04.2014</td><td>18.04.2014</td><td>Täglich</td><td>Floh-, Trödel- &amp; Jahrmarkt</td><td><a href="" class="btn btn_orange" data-featherlight="#fl3" style="padding: 5px 12px;"><i class="fa fa-tint 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/veranstaltungstermine-erstellen.html?area_id=OnRD4sBrvHZgAy4rK4&amp;event_id=1X4JxCOwhDpD4Oj5ch&amp;func=edit_event" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-pencil 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-eye 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-copy 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/meine-veranstaltungen.html?event_id=1X4JxCOwhDpD4Oj5ch&amp;func=delete_event" class="delEvent btn btn_red" data-featherlight="#fl2" style="padding: 5px 12px;"><i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></a></td></tr><tr><td>Frühlingmarkt Osnabrück</td><td>19.04.2014</td><td>22.04.2014</td><td>Täglich</td><td>Floh-, Trödel- &amp; Jahrmarkt</td><td><a href="" class="btn btn_orange" data-featherlight="#fl3" style="padding: 5px 12px;"><i class="fa fa-tint 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/veranstaltungstermine-erstellen.html?area_id=OnRD4sBrvHZgAy4rK4&amp;event_id=LKb77tAmVzeJJjE83LH&amp;func=edit_event" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-pencil 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-eye 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-copy 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/meine-veranstaltungen.html?event_id=LKb77tAmVzeJJjE83LH&amp;func=delete_event" class="delEvent btn btn_red" data-featherlight="#fl2" style="padding: 5px 12px;"><i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></a></td></tr><tr><td>Herbstmarkt Osnabrück</td><td>18.04.2014</td><td>24.04.2014</td><td>Täglich</td><td>Floh-, Trödel- &amp; Jahrmarkt</td><td><a href="" class="btn btn_orange" data-featherlight="#fl3" style="padding: 5px 12px;"><i class="fa fa-tint 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/veranstaltungstermine-erstellen.html?area_id=OnRD4sBrvHZgAy4rK4&amp;event_id=h0NTcpfUlinWbpwBbpB1&amp;func=edit_event" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-pencil 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-eye 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-copy 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/meine-veranstaltungen.html?event_id=h0NTcpfUlinWbpwBbpB1&amp;func=delete_event" class="delEvent btn btn_red" data-featherlight="#fl2" style="padding: 5px 12px;"><i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></a></td></tr>                        </tbody>
                    </table>

                    <a href="/marktadresse/veranstaltungstermine-erstellen.html?area=Abendmarkt+Osnabrueck&amp;area_id=OnRD4sBrvHZgAy4rK4" class="btn btn_green right" style="text-decoration: none"><i class="fa fa-plus fa-lg" style="margin-right: 10px;
                                                                                                                                                                                                            position: relative;
                                                                                                                                                                                                            top: -1px;"></i>neuen Termin für Abendmarkt Osnabrueck erstellen</a> <br><br>
                    <a href="#" class="right" style="margin-top: 10px"><i class="fa fa-chevron-right fa-lg" style="margin-right: 5px;"></i>Alle Veranstaltungsorte</a>

                </div>
            </div>

JSFIDDLE-DEMO

Answer 1

Set the height of .event_area_table_termin to auto. It's currently set to height:112px;.

.event_area_table_termin {
    height: auto;
}

jsfiddle

Answer 2

In your case the inner div with the classes "twelve" and "columns" is getting a "float:left"-style, which effectively destroys its height. This causes the outer div to not wrap correctly around the inner div.

Unless it conflicts with the rest of your styling, you could remove the "float:left"-style from the inner div, i.e. replacing it with float:none;