Positioning text elements to right and left of container which stretches to contain them

Question

How can I position some information in a div to the left and right? I imagine float is involved, which lead me to the below code. .greybottom doesn't seem to acknowledge they exist, the height of .greybottom isn't big enough to contain the floated text.

.purplehead {
    background-color: #A971A9;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    border: 3px solid black;
    border-radius: 7px 7px 0px 0px;
    border-bottom: 0px;
}
.greybottom {
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
    border: solid black 3px;
    border-top: 0px;
    border-radius: 0px 0px 7px 7px;
    background-color: #DDDDDD;
}
.lefttext {
    float: left;
    width: 50%;
}
.righttext {
    float: right;
    width: 50%;
}

<div class="purplehead">Title</div>
<div class="greybottom">
    <div class="lefttext">
        lorem<br/>
        ipsum<br/>
        dolor
    </div>
    <div class="righttext">
        <table style="border: 1px solid black;">
            <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
        </table>
    </div>
</div>

While using float, how can I make it such that a parent div's height will include the floated children?

Answer 1

You need to use a clearfix.

.greybottom::after {
  clear: both;
  content: "";
  display: table;
}

.purplehead {
    background-color: #A971A9;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    border: 3px solid black;
    border-radius: 7px 7px 0px 0px;
    border-bottom: 0px;
}
.greybottom {
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
    border: solid black 3px;
    border-top: 0px;
    border-radius: 0px 0px 7px 7px;
    background-color: #DDDDDD;
}
.lefttext {
    float: left;
    width: 50%;
}
.righttext {
    float: right;
    width: 50%;
}

.greybottom::after {
  clear: both;
  content: "";
  display: table;
}

<div class="purplehead">Title</div>
<div class="greybottom">
    <div class="lefttext">
        lorem<br/>
        ipsum<br/>
        dolor
    </div>
    <div class="righttext">
        <table style="border: 1px solid black;">
            <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
        </table>
    </div>
</div>