General HTML and CSS

[Lee]

I'm making a custom right hand side bar as such, which spans 100% of the height of the forum, over the header too. I have the following html and css;

.container {
width: 100%;
}

.columnLeft {
float: left;
width: 20%;
}
.columnRight {
float: right;
width: 80%;
}

<div class="container">
  <div class="columnLeft">
  <-- Sidebar HTML -->
  </div>

  <div class="columnRight">
  <-- Forum HTML -->
  </div>
</div>

It works fine in that I have two columns next to each other but, when I resize the browser down the right hand column drops below the left. Is there an easy way to just make the left column a fixed with and have the right hand column scale with the window resize?

 

[Lee]

Sorted this.

I made the fixed column float to the left and gave it a 230px width. Then I set the right column up to have a margin-left of 230px. This seems to work smashingly. Although, I had to remove a few clear: both; from the default styling to get the content to sit back up at the top. Made the posts look funky too, needed some adjustment.