Advanced Search

CSS for auto-height rounded corner box

/ Published in: CSS
Save to your folder(s)
probably not the best way, but it seems to work

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2.  
  3.  
  4. .wPlate {
  5. 	width: 353px;
  6. 	margin: 0px 0px 20px 0px;
  7. 	background: #ffffff url(pl_white_center.jpg) repeat-y top left;
  8. 	}
  9.  
  10. .wPlateInner {
  11. 	background: url(pl_white_bottom.jpg) no-repeat bottom left;
  12. 	}
  13.  
  14. .wPlate .wPlateInner h2 { padding: 0px; margin: 0px;} /* for images */
  15.  
  16. .wPlate .wPlateInner h3 {
  17. 	margin: 0px;
  18. 	padding: 20px 20px 0px 20px;
  19. 	font-size: 19px;
  20. 	color: #009900;
  21. 	background: url(pl_white_top.jpg) no-repeat top left;
  22. 	text-align:left;
  23. 	font-family:Arial,Helvetica,sans-serif;
  24. 	}
  25.  
  26. .wPlate p {
  27. 	margin: 0;
  28. 	padding: 1em 15px 5px 20px; 
  29. 	font-size: 12px;
  30. 	line-height: 1.4em;
  31. 	text-align: left;
  32. 	font-family:Arial,Helvetica,sans-serif;
  33. 	}
  34.  
  35. .wPlate p.button {
  36. 	text-align: right;
  37. 	padding: 0 20px 20px 20px; 
  38. }
  39. </style>
  40.  
  41.  
  42. <div class="wPlate">
  43. 	<div class="wPlateInner">
  44. 	<h2><img src="hd_wie.jpg" width="353" height="46" alt="headline" /></h2>
  45. 	<p>
  46. 	Text
  47. 	</p>
  48. 	<p class="button"><a href="#"><img src="b_hierweiter.gif" width="136" height="22" alt="" border="0"/></a></p>
  49. 	</div>
  50. </div>
  51.  
  52.  
  53. <div class="wPlate">
  54. 	<div class="wPlateInner">
  55. 	<h3>headline</h3>
  56. 	<p>
  57. 	Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  58. 	</p>
  59. 	<p class="button"><a href="#"><img src="b_hierweiter.gif" width="136" height="22" alt="" border="0"/></a></p>
  60. 	</div>
  61. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.