Feeling a bit frustrated with CSS at the moment, always getting tripped up by the little things. So here's my issue: I'm working on a design that requires 2 columns - one sidebar of 300px on the right, and the other column should fill the remaining space.
Currently, I have the sidebar appearing below the main content in the left column.
Here is the HTML code:
<div class="wfix"><div class="col-fix">
<div class="col-lg">
<!--
<div id="block">
<bh>Homepage</bh>
<detail id="test">Loading...</detail>
</div>
-->
</div>
<div class="col-side">
</div>
</div></div>
And here is the corresponding CSS code:
.wfix{ margin-left: 5em; margin-right: 5em; }
.col-fix {
display: table;
width: 100%;
table-layout: fixed;
}
.col-lg, .col-side {
color: #999;
margin: 0;
padding: 0;
}
.col-lg {
margin-left: 0;
margin-right: 300px;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: blue;
min-height: 500px;
}
.col-side {
width: 300px;
float: right;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: red;
min-height: 500px;
}
Any help or guidance would be greatly appreciated. Thanks in advance, Jake.