CSS Info Boxes

CSS Info Boxes

Download

<style>
.columns-wrapper {
width: 960px;
float: left;
margin-bottom: 30px;
}
.two-columns,.two-columns-2 {
width: 457px;
float: left;
margin-right: 45px;
}
.info_box,.note_box,.tip_box,.error_box,tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
}
.info_box {
background: #ddf3fc url(images/icons/info.png) no-repeat scroll 10px
 14px;
border: 1px solid #8ed9f6;
color: #2e6093;
}
.note_box {
background: #fffadb url(images/icons/note.png) no-repeat scroll 10px
 15px;
border: 1px solid #f5d145;
color: #9e660d;
}
.error_box {
background: #ffdede url(images/icons/error.png) no-repeat scroll 10px
 15px;
border: 1px solid #d97676;
color: #cd0a0a;
}
.tip_box {
background: #eff7d9 url(images/icons/tip.png) no-repeat scroll 10px
 15px;
border: 1px solid #b7db58;
color: #5d791b;
}

</style>
<h2>Info Boxes</h2>
    <div class=" columns-wrapper">
      <div class="two-columns">
        <div class="info_box"><b>Info:</b> Insert your text here</div>
        <div class="error_box"><b>Error:</b> Insert your text here</div>
      </div>
      <div class="two-columns-2">
        <div class="note_box"><b>Note:</b> Insert your text here</div>
        <div class="tip_box"><b>Tip:</b> Insert your text here</div>
      </div>
      <br />
      <br />
    </div>