Div contents don't float left as they should - html

Question

I have the following markup for a div of content that's being dynamically pulled from a .json file:
<div class="subSection">
<div ng-repeat="content in subSection.content" class="subSection_content">
<div class="table_container">
<p ng-if="content.type =='table_p'" ng-bind-html="content.content" class="{{content.class}}"></p>
<ul ng-if="content.type == 'table_ul'" class="{{content.class}}">
<li ng-repeat="li in content.content track by $index" ng-bind-html="li.item"></li>
</ul>
</div>
</div>
</div>
And the following CSS that applies to this div:
div.table_container {
background-color: #a9c7e1;
width: 100%;
}
p.table_img_p {
background-color: #0090c3;
color: #FFFFFF;
margin: 0;
padding: 0.5em;
}
.table_img_list {
padding: 0.5em;
}
#media only screen and (min-width: 720px){
div.subSection {
width: 100%;
}
div.subSection_content {
width: 100%;
}
div.table_container {
width: 50%;
float: left;
}
}
And here's what's it giving me instead of floating the divs to the left. It treats the elements within that div as individual divs. >.< Clearing anything at all doesn't help. Suggestions?
And here's the output code (HTML). Nothing odd going on in CSS.
<div class="subSection">
<div class="subSection_content ng-scope">
<p class="firstP">One way that toxicity can be measured is by its specific effect on an organ or organs. The kidneys and liver are most commonly associated with toxicity because of their primary roles in metabolism, detoxification, and excretion. However, all body organs can be affected including the skin, brain, heart, lungs, and gastrointestinal organs.</p>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<p class="table_img_p">Symptoms of Liver Damage</p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul class="table_img_list">
<li class="ng-binding ng-scope">Jaundiced skin or eyes</li>
<li class="ng-binding ng-scope">Abdominal pain</li>
<li class="ng-binding ng-scope">Nausea</li>
<li class="ng-binding ng-scope">Discolored or bloody waste secretions</li>
<li class="ng-binding ng-scope">Fatigue</li>
<li class="ng-binding ng-scope">Anorexia</li>
</ul>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<p class="table_img_p">Symptoms of Kidney Damage</p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul class="table_img_list">
<li class="ng-binding ng-scope">Hypertension</li>
<li class="ng-binding ng-scope">Nausea</li>
<li class="ng-binding ng-scope">Edema</li>
<li class="ng-binding ng-scope">Fatigue</li>
<li class="ng-binding ng-scope">Anorexia</li>
<li class="ng-binding ng-scope">Change in urine output</li>
<li class="ng-binding ng-scope">Chest pain and shortness of breath</li>
</ul>
</div>
</div>
What's wanted: on mobile it should be 1 column (two blue boxes one under the other), and on larger views it should be two columns (two blue boxes next to each other). I've done styling of this kind of thing many times before and never had such difficulty styling it. Just looking for suggestions on what is going on that it doesn't want to float on "1 line" next to each other.

Answer 1

NOTE: OP has updated question with visual example since this answer was provided.
You haven't given a clear definition of what you'd like to achieve but I'll take a stab at it.
I'm going to assume the following:
That the light blue DIV should be under the darker blue DIV.
That the darker blue DIV is the header for the light blue DIV.
That each dark blue DIV and light blue DIV will be treated is one item/gropu/etc.
That on smaller screens the Liver Damage group appears above the Kidney Damage group.
That on larger screens the Liver Damage group appears to the left of the Kidney Damage group.
If so, then the issue is the way you're conditionally outputting your content/markup. The template doesn't match the output markup you've provided. Each header is nested in the same set of DIVs as its associated content.
<div class="subSection_content ng-scope">
<div class="table_container">
<p><!-- header --></p>
</div>
</div>
<div class="subSection_content ng-scope">
<div class="table_container">
<ul><!-- content --></ul>
</div>
</div>
I would expect to see something like this if my assumptions are correct:
<div class="subSection_content ng-scope">
<div class="table_container">
<p><!-- header --></p>
<ul><!-- content --></ul>
</div>
</div>
Which match your template but not output markup. This would get you the results you are looking for with the supplied CSS, http://jsfiddle.net/kqwpheh9/. The jsFiddle doesn't include any spacing between the lists, you'll have to include that later.
It appears your .table_container and .subSection_content DIVs might be redundant, among other markup considerations.

Answer 2

Add `float:left' in css as follows
div.subSection_content {
width: 100%;
float:left;
}
complete code:-
div.table_container {
background-color: #a9c7e1;
width: 100%;
}
p.table_img_p {
background-color: #0090c3;
color: #FFFFFF;
margin: 0;
padding: 0.5em;
}
.table_img_list {
padding: 0.5em;
}
#media only screen and (min-width: 720px){
div.subSection {
width: 100%;
}
div.subSection_content {
width: 100%;
float: left;
}
div.table_container {
width: 50%;
float: left;
}
}