How do i make the right side 300px and the left side as big as possible? CSS

Here is some code http://jsfiddle.net/LfC78/

I am trying to make the right side 300px (which is roughly half on my screen. My site will use a different fix width) and the leftside to be the remainder of the width. As you can see, the leftside isnt and the textarea is not readable.

The right side MUST be on the right and not under.开发者_如何学JAVA Also i possibly will make the min height of both sides the height of the client screen (if its possible with css).

I messed around for an hour without success. How do i do this?

Option1: CSS

One way to do it without using JS will be to have a wrapper which will contain entire width of your content and inside it float a block to right side of 300px {or whatever width you require}

Option2: http://pastie.org/1472661/

var width = window.innerWidth - 300;
document.getElementById('leftside').style.width = width + 'px';

Also, add clear the floating div

<div class="Display clrfx">
    <div class="leftside">
    <textarea cols=""></textarea>
    </div>
    <div class="rightside">the text</div>
</div>

.clrfx:after {
display:block;
clear:both;
content:"";
}

Corrected:

.rightside{ background: gray; width:300px; position: absolute; top: 0px; right: 0px; }

.leftside{position: absolute; right: 0px; padding-right: 300px;}

.leftside textarea{ width: 100%; }

.Display{width: 100%;}

Edit looks like this won't actually work with a max-width assignment.