Float Center

by a1ex

HTML

<div>
    <p id="left">Lorem ipsum dolor sit amet, an veri saepe verterem nam. Duo id inani epicurei. Sea at liber fabellas consequuntur. Id ceteros reprimique vix, an natum iisque molestie nam. Mei et meis fabellas atomorum, sit solum summo id. Ancillae noluisse ex eos, et sea modus meliore verterem. Cum te suas aeterno deterruisset. Porro moderatius no quo</p>
    <p id="right">Lorem ipsum dolor sit amet, an veri saepe verterem nam. Duo id inani epicurei. Sea at liber fabellas consequuntur. Id ceteros reprimique vix, an natum iisque molestie nam. Mei et meis fabellas atomorum, sit solum summo id. Ancillae noluisse ex eos, et sea modus meliore verterem. Cum te suas aeterno deterruisset. Porro moderatius no quo</p>
    <img src="http://avt.foto.mail.ru/bk/ae_design/_avatar" alt="" />
</div>

CSS

div {
    position: relative;
    margin: 20px 0;
}
img {
    position:absolute;
    top:0;
    left:50%; /* по центру */
    margin-left:-33px; /* минус половина ширины картинки */
}
#left, #right { 
    width:49%;
    background:#eaeaea; /* для наглядности */
}
#left {
    float:left;
}
#right { 
    float:right;
}
#left:before, #right:before { 
    content:'';
    display: block;
    width:33px; /* половина ширины картинки */
    height:90px; /* высота картинки */
    float:right;
    background: #f0ef0e; /* для наглядности */ 
    padding:0 0 5px 5px; /* отступ от картинки */
}
#right:before {
    float:left;
}