Edit in JSFiddle

<div class="container">
    <div class="box left">This is some filler text for this example</div>
    <div class="box right">This is some filler text for this example</div>
</div>

* {	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;  
}

.container {
    width: 300px;    
    outline: 1px solid red;
}

.container:after {
    content: "";
    display: table;
    clear: both;
}

.box {
    width: 50%;    
    outline: 1px solid blue;     
    padding: 20px;
}

.left {
    float: left;
}
.right {
    float: right;
}