2 columns, one side fluid , one side fixed - html

Question

Ok, so i thought this was easy as 123. I've research here and tried a couple of solutions. For some reason, i can't get it right.
Basically, i'm trying to do a layout where the left column is fluid and the right column is fixed.
HTML:
<div class="column-ab">
<div class="col-content">content section</div>
<div class="col-aside">side section</div>
</div>
CSS:
.column-ab {background-color: black; width: 100%;}
.column-ab .col-aside, .column-ab .col-content {float: left;}
.column-ab .col-content {background-color: cyan; margin-right: 300px;}
.column-ab .col-aside {background-color: yellow; width: 300px;}
.column-ab:after {display: table; content: ""; clear: both;} /* clear */
jsfiddle:
https://jsfiddle.net/ud1frxdp/
Why something so easy doesn't work?

Answer 1

Turn your classes into ids or they will both inherit a width of 100%; then set the width.
.column-ab {background-color: black; width: 100%;}
#col-aside, #col-content {float: left;}
#col-content {background-color: cyan; width: calc(100% - 300px);}
#col-aside {background-color: yellow; width: 300px;}
.column-ab:after {display: table; content: ""; clear: both;} /* clear */
<div class="column-ab">
<div id="col-content">content section</div>
<div id="col-aside">side section</div>
</div>

Answer 2

As an alternative solution your problem can also be solved using few lines of flexbox layout. Code explanation in comments.
.column-ab {
display: flex;
flex-wrap: wrap; /* Wrap the divs when width is too small i.e. <300px of viewport */
}
.col-content {
flex: 1; /* Expands and shrinks according to width, fluid content */
background: tomato;
}
.col-aside {
flex: 0 0 300px; /* flex-basis: 300px for fixed width */
background: lightblue;
}
<div class="column-ab">
<div class="col-content">content section</div>
<div class="col-aside">side section</div>
</div>
Updated JSfiddle

Answer 3

Using display: table; and display: table-cell; is a common use and also a wide cross-browser code, compatibility from IE8 http://caniuse.com/#search=table
https://jsfiddle.net/ud1frxdp/3/
.column-ab {
background-color: black;
width: 100%;
display: table;
}
.column-ab .col-aside, .column-ab .col-content {
display: table-cell;
}
.column-ab .col-content {
background-color: cyan;
}
.column-ab .col-aside {
background-color: yellow;
width: 300px;
}
I also exploded your CSS because of readability, you should avoid coding like this and use a post-processor to minify it, being able to read the code is very important.