Float ou comment se prendre la tête....

Bonsoir à tous !
Alors voilà je débute un peu en html css et je rencontre un problème qui me prend la tête depuis maintenant un bon moment. Il est simple, je veux mettre une div à droite d'une autre mais ça refuse de fonctionner. Voici mon code fortement simplifier et une image pour tout expliquer.

html:

<div class="content">
    <div class="logo"></div>
    <div class="about">blablabla</div>
    <div class="nav">
        <ul>
            <li><a id="1" href="#">FOLIO</a></li>
            <li><a id="2" href="#">CONTACT</a></li>
        </ul>
    </div>
    <div class="follow">
        <p>Follow me :</p>
        <a href="#"><img src="img/twitter.png" /></a>
        <a href="#"><img src="img/google.png" width="26px" height="26px" /></a>
    </div>  
</div>
<div class="content2">blabalabalbla</div>

css:

body {
    margin:0;
    padding:0;
    background: url(img/bg.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
    font-family: 'AppleGaramondLightRegular';
    height: 100%;
}
.content {
    width: 272px;
    height: 100%;
    margin-left: 400px;
    background: url(img/content.png) repeat-y;
    padding-top: 100px;
    position: absolute;
    float: left;
}
.content2{
    background: url(img/folio-bg.png) repeat-y;
    width: 210px;
    height:100%;
    position: relative;
}

Or mon content2 se place carrément à gauche (voir image)et en plus de ça il ne prend pas toute la hauteur de la page.

Merci pour votre aide.
Cordialement.