Using CSS to create three boxes with dividers and text centered within each box
- by linnse
I'm trying to figure out the best way to create a row of three boxes (columns), with dividers between boxes 1 and 2, and boxes 2 and 3. The text would need to be centered within each box.
h2 {
color: #00ADEF;
margin-top:0;
margin-bottom:0;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
line-height:23px;
}
p {
margin-top:0;
}
.3colwrapper {
width: 930px;
margin: 0 auto;
}
.colbox {
float:left;
margin: 10px;
width: 210px;
background:#DDD;
padding:10px 40px;
}
<div class="3colwrapper">
<div class="colbox"><h2>Step One</h2>
<p>Sign up</p>
</div>
<div class="colbox"><h2>Step Two</h2>
<p>Verify</p>
</div>
<div class="colbox"><h2>Step Three</h2>
<p>Participate</p>
</div>
</div>
Here's what I've worked up so far: http://cssdesk.com/YyjAr
