I am looking to create a layout with two columns, one for content and the other for a sidebox. The sidebox should have a fixed width while the content column can shrink as needed.
Eventually, both columns will stack to 100% width, but I want the content column to come first. The current issue is that the sidebox comes before the content column.
I prefer not to use floats and percentages because I do not want the sidebox to shrink.
html:
<aside class="sidebox"> <!-- I don't want this to be displayed first after applying media query -->
sidebox
</aside>
<section class="content">
content
</section>
css:
.content {
margin-right:200px;
height:100px;
background-color:red;
}
.sidebox{
width:180px;
float:right;
height:100px;
background-color:yellow;
}
@media (max-width: 500px) {
.sidebox {
float:none;
width: auto;
}
.content {
margin-right:0px;
}
}