I'm facing an issue with two divs that are floated left to appear inline
<div class==".container" style="width: 100%">
<div class="leftColumn" style="width: 50%; float:left">
test
</div>
<div class="rightColumn" style="width: 50%; float:left">
test
</div>
</div>
However, when the screen width falls below 400px, I want these divs to stack on top of each other. Here's my current media query:
@media(max-width: 400)
{
.leftColumn{background-color: Red; float: none}
.rightColumn{background-color: Blue; float: right}
}
Any assistance on resolving this problem would be greatly appreciated.