HTML + CSS: take all available viewpoer

Question

I'm trying to make liquid HTML layout with header (taking all available width and 130px height), 2 columns (1: 300px width all possible height, 2: all available width after column 2 took its 300px and 15-20px margin between them).

Atm I've got this:

HTML:

<div class="wrapper">
   <div class="header">
      <!-- .... -->
   </div>
   <div class="content">
      <div class="left-column">
        <!-- ... -->
      </div>
      <div class="right-column">
        <!-- ... -->
      </div>
   </div>
</div>

CSS:

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  min-width: 1000px;
  min-height: 500px;
}

body {
  font: 12px sans-serif;
  background-color: #fff;
  color: #000;
}

.wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.header {
  padding: 0 30px;
  height: 100px;
  left: 0px;
  right: 0px;
  position: absolute;
  border: 1px solid black;
  border-top: none;
}

.content {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: 10px 20px;
  border: 1px solid black;
}

.left-column {
  float: left;
  width: 300px;
  border: 1px solid black;
}

.right-column {
  margin-left: 315px;
  border: 1px solid black;
}

The question is: are there any better solutions?

Thanks.

Answer 1

I took your HTML and created this fiddle for you: http://jsfiddle.net/RdQJY/1/. I didn't use any of your CSS though - I just don't like positioning used in the way you are using it, so decided to write it from scratch (sorry about that). The lorem ipsum text is just there as a placeholder - if you remove it, you'll see that the divs will occupy the whole window. Hope this helps!

P.S.: the only drawback to my method of having equal-height columns is that there is no easy way to apply a bottom border to them.