Advanced Search

simple graphic box code (3 col example)

/ Published in: HTML
Save to your folder(s)
This is simple but saves time to copy-paste. This example has three columns (.boxcol) within the box. But the columns can be removed for single-column box.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2.  
  3. .box581-outer {
  4. 	width:581px; background: url('images/box-581-mid.jpg') repeat-y;
  5. }
  6.  
  7. .box581-inner {
  8. 	background: url('images/box-581-top.jpg') no-repeat; padding:41px 35px 16px 35px;
  9. }
  10.  
  11. .box581-footer {
  12. 	background: url('images/box-581-bottom.jpg') no-repeat; height:54px;
  13. }
  14.  
  15.  
  16. .boxcol {
  17. 	float:left;
  18. }
  19.  
  20.  
  21. .box581-inner .boxcol {
  22. 	width:133px; padding:0 18px; 
  23. }
  24.  
  25.  
  26.  
  27. </style>
  28.  
  29.  
  30.  
  31. <div class="box581-outer"><div class="box581-inner">
  32. <div class="boxcol">left</div><div class="boxcol">center </div><div class="boxcol">right</div>
  33. <div class="clear"></div></div><!--/.box581-inner--><div class="box581-footer"></div><!--/.box581-footer--></div><!--/.box581-outer-->

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.