Float makes <div> go out of page

[Fabis94]

Ok i'm trying to make a layout in which there is a content <div> that sticks to the left (and thats where all the text and everything is) and to the right of it there's a sidebar.

 

Now i used float:right; to make the sidebar stick to right, but the problem is, if i fill it full of text, it does this:

 

http://i31.tinypic.com/24y62dj.png

(the "GARG" part i used for testing, goes out of the page and continues there)

 

I want it to make the page longer, not break it and go out of it.

 

Here's the main <div>:

 

<div class="page">
    	<div class="page_left">
        Y harro
        </div>
        <div class="sidebar">
        GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>
        GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>
        GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>
        GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>
        GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>
        GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>
        GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>
        GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>GARG <br>
        </div>
    </div>

 

The class "page" is the white part. Actually here's the CSS aswell:

 

.sidebar {
margin: 20px;
position: relative;
height: auto;
width: 300px;
border-left: thin solid #000000;
margin-bottom: 10px;
top: 0px;
right: 0px;
float: right;
}

.page_left {
margin: 20px;
float:left;
min-height: 200px;
border-bottom: thin solid #000000;
width: 600px;
}
.page {
background-color: #FFFFFF;
margin-bottom: 10px;
border: 1px solid #000000;
min-height: 700px;
padding-bottom: 10px;
}