3 простые колонки, сложные

by blancod

HTML

<div id="wrapper">
    <div class="a">
        <h3>Блок №<span>1</span></h3>
        <p>
            Contrary to popular  belief, Lorem Ipsum is not simply random text. It has roots in a piece  
        </p>
    </div>
     <div class="b">
        <h3>Блок №<span>2</span></h3>
         <p>
            Contrary  to popular  belief, Lorem Ipsum is not simply random text. It has roots  in a piece
        </p>
    </div>
     <div class="c">
        <h3>Блок №<span>3</span></h3>
         <p>
            Contrary  to popular  belief, Lorem Ipsum is not simply random text. It has roots  in a piece 
        </p>
    </div>
</div>

CSS

#wrapper{
    width:300px;
    background-color:#cc6;
    margin: 5px auto;
}
.a{
    width:100px;
    background-color:#BFE5FF;
    float:left;
    position:relative;
    left:100px;
}
.b{
    width:100px;
    background-color:#8ECFCF;
    float:left;
    position:relative;
    left:-100px;
}
.c{
    width:100px;
    background-color:#FFC68F;    
    float:left;
}
p{
    -moz-border-radius: 0 0 7px 7px;
    -moz-box-shadow: 0 0 15px #888;
    background-color: #447788;
    border-color: #77AABB;
    border-style: solid;
    border-width: 0 1px 10px;
    color: #FFFFFF;
    font-family: Verdana,sans-serif;
    font-size: small;
    letter-spacing: -1px;
    margin: 0 10px 10px;
    padding: 7px;
}
h3{
    -moz-border-radius: 7px 7px 0 0;
    -moz-box-shadow: 0 0 15px #FFFFFF;
    background-color: #88BBCC;
    border-color: #88AABB #447788 #447788;
    border-style: solid;
    border-width: 1px 1px 0;
    color: #000000;
    font-family: sans-serif;
    margin: 10px 0 0 11px;
    padding: 2px 0 0 2px;
    text-shadow: 1px 1px 0 #A2AFBA;
    width: 74px;

}
span{
    color:#e40;
}