Text between 2 horizontal lines with DIVS

Text between 2 horizontal lines with DIVS

by Nirvanachain

HTML

<section class="first">
    <p>Something here</p>
</section>
<div class="clear">
    <div>&nbsp;</div><span>THIS IS A TEST</span><div>&nbsp;</div>
</div>
<section class="second"> 
    <p>Here is some more content</p>
</section>

CSS

section.first {  
    width:100%;
    background-color:#FFF;
}
section.second { 
    width:100%;
    background-color:#ebebeb; 
    position:relative;
    z-index:2;
    top:-10px;
    padding-top:25px;
   
}
.clear {
    overflow:hidden;
    position:relative;
    z-index:3;
}
.clear div { 
    float:left;
    width:30%; 
    text-align:center; 
    /*border-bottom: 1px solid #000; */
    line-height:0.1em; 
    margin:10px 0 0px;
    background-image: -webkit-gradient(linear, 25% 0%, 0% 25%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
background-image: -moz-linear-gradient(center right, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%);
    position:relative;
    z-index:3;
} 
span {
    float:left;
    padding:0 10px; 
    position:relative;
    z-index:3;
}