Alright, I've got a quick solution for you. Your HTML structure is solid, but I'm going to streamline it a bit more. Check out the updated JsFiddle link.
Here's your original code:
#maincontainer {
width:100%;
height: 100%;
}
And here's the tweak I made:
#maincontainer {
width:100%;
height: 100%;
display:inline-block; // added this line
}
I also adjusted two other things:
#leftcolumn {
float:left; // added this line
width: 100px;
height:100%;
background: blue;
}
#contentwrapper {
float:right; // added this line
width:100%;
height: 100%;
background-color: red;
}
In the updated JsFiddle, I set a specific width, but feel free to customize it. Keep in mind that using a width of 100% alongside other elements on the same line may cause wrapping, as shown here:
#leftcolumn {
display:inline-block; // changed this line above
width: 100px; // This will cause issues below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block; // changed this line above
width:100%; // This will cause issues above
height: 100%;
background-color: red;
}
For better alignment, consider this structure:
#leftcolumn {
display:inline-block;
width: 10%; // Works with the line below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width:90%; // Works with the line above
height: 100%;
background-color: red;
}
In the JsFiddle, I added height and width for clarity. For further insights, check out this resource. Let me know if you encounter any issues!