CSS page layout, keep text in its own div column - html

Question

I have a page layout with two div. They are both float:left and so appear as columns next to each other. I want them to stay that way. However, if the text in the right-most div is too long then the whole text moves down below the left most column. This also happens if the text is short, but I make the browser window smaller. What I want is for the long text to take up more lines, but only within its own right column.
CSS:
.left{float:left}
.right{float:left}
HTML:
<div id="container">
<div class = "left">
<span>some text</span>
</div>
<div class = "right">
<span>some long text....</span>
</div>
</div>
Edit: Also, the left column should stay fixed.

Answer 1

Sounds like you want to do something like this:
http://jsfiddle.net/VV4Hc/8/
The outer container specifies the width those two divs should occupy. As you can see, they also have percentage widths so you can change the container's property without having to go back and change the divs.
Word of warning, remember to clear your floats as well, so other elements don't get "caught" in the float. To do that, just define an element with the property clear:both like this:
.container {
width: 1000px;
margin: 0px auto; /* This will center the container on the page. */
}
.left, .right {
float: left;
width: 50%;
}
.clearfix {clear:both;}
<div class="container">
<div class="left">...</div>
<div class="right">...</div>
<div class="clearfix"></div>
<p>I won't get caught.</p>
</div>
If you're looking to do this for layout, you may want to consider a CSS framework, which has these sorts of things perfectly measured based on a specified number of columns. See:
Bootstrap/Kickstrap
960.gs
Blueprint

Answer 2

You can set the positions for those divs like
.left{width: 50%; position:relative; top:0%; left:0%;}
.right{width: 50%; position:relative; top:0%; left:50%;}

Answer 3

I was able to solve it with a table. When the window is made smaller, at first only the right column is made smaller and the words squeeze down on more lines until the column has disappeared. If the browser is made smaller than the width of the left column, then the left column starts disappearing, cutting off words. Works in my Chrome and IE although I don't know about older IE.
.td_right{vertical-align:top; max-width:300px;}
.td_left{vertical-align:top; min-width:300px; width:300}
<table >
<tr>
<td class = "td_left">
stuff here
</td>
<td class = "td_right">
stuff here
</td>
</tr>
</table>