
Untitled
By: a guest on
Jul 17th, 2012 | syntax:
None | size: 2.73 KB | hits: 16 | expires: Never
Using CSS to create three boxes with dividers and text 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>
h2 {
color: #00ADEF;
margin-top: 0;
margin-bottom: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
/* [disabled]line-height:23px; */
}
p {
margin-top:0;
}
.3colwrapper {
width: 930px;
margin: 0 auto;
}
.colbox {
float: left;
width: 210px;
background: #DDD;
border-right-width: medium;
border-right-style: solid;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
}
p {
text-align: center;
}
<html>
<body>
<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>
</body>
</html>
h2 {
color: #00ADEF;
margin-top: 0;
margin-bottom: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
/* [disabled]line-height:23px; */
}
p {
margin-top:0;
}
.3colwrapper {
width: 930px;
margin: 0 auto;
}
.colbox {
float: left;
width: 210px;
background: #DDD;
border-right-width: medium;
border-right-style: solid;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
border-right-color: #000;
}
.colbox1 {
float: left;
width: 210px;
background: #DDD;
border-right-width: medium;
border-right-style: solid;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
border-right-color: #000;
}
.colbox2 {
float: left;
width: 210px;
background: #DDD;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
border-right-color: #000;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div class="3colwrapper">
<div class="colbox"><h2>Step One</h2>
<p>Sign up</p>
</div>
<div class="colbox1"><h2>Step Two</h2>
<p>Verify</p>
</div>
<div class="colbox2"><h2>Step Three</h2>
<p>Participate</p>
</div>
</div>
</body>
</html>