Advanced Search

boxes with headings

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The HTML:
  2.  <div id="holderdiv">
  3.    <div> <!-- a bordered box -->
  4.      <h2>1st Box</h2>
  5.      <p>Just a typical paragraph</p>
  6.    </div>
  7.    <div> <!-- a bordered box -->
  8.      <h2>2nd Box</h2>
  9.      <p>Just a typical paragraph</p>
  10.    </div>
  11.  </div>
  12.  
  13. The CSS:
  14. #holderdiv {width: 250px;}
  15.  
  16. #holderdiv div { /* Selects any div inside #holderdiv */
  17.   margin: 0 10px 10px 10px; /* moved from paragraph */
  18.   color: #363636;
  19.   background-color: #eec;
  20.   border: 1px solid black;
  21. }
  22.  
  23. #holderdiv p {margin: 5px;} /* changed from padding */
  24. #holderdiv h2 {
  25.   margin: 0;
  26.   background-color: #7a7;
  27.   color: white;
  28.   font-size: 0.9em;
  29. }

URL: http://www.communitymx.com/content/article.cfm?page=2&cid=CB7B3

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.