push pin

by 3axap

HTML

<div class="mboard-block-up">
    <h2>Lorem %TitleName%</h2>    
</div>
<div class="mboard-wrapper">
    <div class="floatedblock left">I</div>
    <div class="floatedblock right">II</div>
    <div class="mboard-block">
        <h2>%SubTitleName%</h2>    
        <p>Content here.. content here.. content here.. content here.. content here.. content here..</p>
    </div>
</div>

CSS

.mboard-wrapper {
    position: relative;
    padding-top: 20px;
}
.floatedblock {
        position: absolute;
        top: 0px;
        width:64px;
        height:64px;
        text-align: center;
        }
    .floatedblock.left{
        background:green;
        left: -20px;
        margin-left: 20px;
    }
    .floatedblock.right{
        background:red;
        right: -20px;
        margin-right: 20px;
        }

.mboard-block {
    margin: 10px;
    padding: 14px;
	background-color: #f5f5f5;
	border: 1px solid #eee;
}
.mboard-block-up{
    margin: 10px;
    padding: 20px;
	background-color: #EFEFEF;
	border: 1px solid #000;
    text-align: center;
}
.mboard-block h2{
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 14px;
	font-weight:normal;
	text-align: center;
}
.mboard-block p{
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    padding: 14px;
    font-size: 13px;
}