Why doesn't this CSS Full Height Layout display properly?

Question

Update: I'm awarding a bounty of 50 to whoever can help me achieve this design.

---

So I've been trying for the past 2-3 hours to fix this but can't seem to do it. Maybe someone with CSS or jquery experience can help me. I'm trying to accomplish this. This is my result. Problem is that when I resize the browser window, column B's content gets cut off and there's an extra white space on the left of column A. Here's a screenshot of what I mean to save you the time.

CSS:

#public {
  width:100%;
}
#public #container {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  min-width:1050px;
}
#public .left {
  float:left;
  width:40%;
  height:100%;
  background-color:#fff;
}
#public .left .content {
  float:right;
  width:365px;
  margin-top:20px;
  text-align:center;
}
#public .left .platforms {
  margin-top:40px;
}
#public .left .aila {
  display:block;
  margin-top:25px;
}
#public .left .copy {
  margin-top:20px;
  color:#171515;
  font:bold 12px Arial, Verdana;
}
#public .right {
  float:right;
  width:60%;
  height:100%;
  overflow:hidden;
}
#public .right .content {
  float:left;
  width:665px;
  min-height:704px;
  margin-top:20px;
  background:url(images/public-right-shadow.png) no-repeat left top;
}

HTML:

<div id="public">
  <div id="container">
    <div class="left">
      <div class="content">
        <img src="images/logo2.png" alt="" class="logo" />
        <img src="images/supported-platforms.png" class="platforms" />
        <div class="copy">&copy; all right reserved 2012</div>
      </div>
    </div><!--.left-->
    <div class="right">
      <div class="content">
      Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. Right column here. 
      </div>
    </div><!--.right-->
  </div><!--#container-->
</div><!--#public-->

Answer 1

i dont seem to replicate the same output , however, to me it seems that Your problem is in those width values of both Your content class objects.You have two relatively sized objects,specific values are 40% and 60% of Your window size.,but inside these , You have absolute width values (365px and 665px).Because Your screenshot resolution is 1,076px × 784px, this means that Your right column , the #public .right , is cut at about 600+- px of width , however You are putting 665px width inside it.Which almost certainly overflows your wraping object.Therefor creating valid space for the runaway text. For Your overflowing text problem i would look for the problem there.

Now for the extra space on left side of Your #public .left this probably occurs because You are floating its content to the right side.

But as I said , i cant duplicate the same outcome.So if tinkering with that doesnt fix Your problem , feel free to ask more.

EDIT: To Your Right Side problem , even though you support 1030px width ind your

min-width:1050;

Your

public .right

gets from that at max 630 , but in that You are trying to fit 665px

This code should fix Your issue

#public .right .content {
  /* change padding value to whatever feels right */
padding-right: 10px;
float:left;
 /* this loses the fixed size though */
width:100%;
min-height:704px;
margin-top:20px;
background:url(images/public-right-shadow.png) no-repeat left top;
 }

Answer 2

I've made some simple adjustments for you and as far as I can tell it's working as per the image you attached in your question. See http://joshdavenport.co.uk/staging/swd/.

The differences are:

#public #container {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;

    min-width: 960px;
}

This min-width adjustment allows your design to fit tighter to the left when reducing the size of the page.

#public .right .content {
    /* change padding value to whatever feels right */
    padding-right: 10px;
    float:left;
    /* this loses the fixed size though */
    min-height:704px;
    margin-top:20px;
    background:url(images/public-right-shadow.png) no-repeat left top;

    width: 510px;
    padding: 10px 40px;

}

The width here ensure this element stays the same width all of the time and the padding ensures it stays away from the left area. You'll probably want to tweak this.