Centered picture + floating text around

Trying to do some magic with floating boxes :D

by goodfriend

HTML

<div class="whole">
    <div class="left">
        <p> and Mouse Move (to do the move). Obviously if you nee auto-scroll as you drag, you’ll need to write a bit more code
        </p>
        <p> and Mouse Move (to do the move). Obviously if you nee auto-scroll as you drag, you’ll need to write a bit more code
        </p>
        <p> and MouseMove (to do the move). Obviously if you need dragged objects to come to the top in the Z order, or to be able to auto-scroll as you drag, you’ll need to write a bit more code
        </p>
    </div>
    <div class="center">
        <p class="special"> and Mous eMove (to do the move). Obviously if you need dragged objects to come to the top in the Z order, or to be able to auto-scroll as you drag, you’ll need to write a bit more code
        </p>
    </div>
    <div class="right">
        <p> and MouseMove (to do the move). Obviously if you need dragged objects to come to the top in the Z order, or to be able to auto-scroll as you drag, you’ll need to write a bit more code
        </p>
        <p> and Mouse Move (to do the move). Obviously if you nee auto-scroll as you drag, you’ll need to write a bit more code
        </p>
        <p> and MouseMove (to do the move). Obviously if you need dragged objects to come to the top in the Z order, or to be able to auto-scroll as you drag, you’ll need to write a bit more code
        </p>
    </div>
</div>

CSS

.whole{
    width:100%; 
}
p{
    border: solid 2px orange;
    padding: 5px;
}

.left{
    display: block;
    float:left;
    width: 20%;  
    margin:5px;
}
.center{
    display: block;
    float:left;
    width: 50%;   
    margin:5px;
}
p.special{
    border: solid 2px blue;    
}
.right{
    display: block;
    float:left;
    width: 20%;   
    margin:5px;
}