Height Auto Not Working - html

Question

I am using bootstrap and basic CSS on my app and for some reason the height-auto on a div isn't working. The height is shown as 0 even though there is text in the div. Here's my html:
<div class="container">
<div class="outlined-div">
<h2 class="text-center col-xs-12" style="color: red">Men are not born knowing how to barbecue.</h2>
<div class="col-xs-12 col-sm-6">
<h4>Good luck explaining this to your buddies.</h4>
<h4>All men are capable. Few are properly trained.</h4>
<h4>Instead, we undergo years of trial and error, suffering through snide comments from our buddies and smug looks from our fathers-in-law. This ends now.</h4>
</div>
<div class="col-xs-12 col-sm-6">
<h4>While men don’t ask for directions (see the man code), it’s only right that we share hints, hacks, and other help with our fellow brothers.</h4>
<h4>Give them a leg up in impressing others with our stellar barbecuemanship.</h4>
<h2 style="color: red">Grill on, brothers.</h2>
</div>
</div> <!-- outlined-div -->
</div> <!-- container -->
Here's my css for outlined-div:
.outlined-div {
background-color: white;
border: solid medium red;
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
height: auto !important;
}
And here's how it's showing up:
If I put in a fixed height (e.g. height: 10px) the red line expands into a box 10px high.
Can anyone see where I'm going wrong here?

Answer 1

Add the class clearfix to your outlined-div
This will clear the floats added by Bootstrap to create the column layout.
To learn more about clearfixes, read this question: What is a clearfix?