I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the first of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I did not create this code from scratch – but I will use it if I need something really simple and really quick. Height is not fixed.
The container:
b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent{margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}
Content
This is a quick and easy way to do something that looks better than a square box.
The code:
b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent {margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}
<div class="jzcontainer">
<b><b></b><b></b><b></b><b></b></b>
<div class="jzcontent">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<b><b></b><b></b><b></b><b></b></b>
</div>
General Information:
Although it is very simple, I am not a fan of the code at all. My next example in this series will look at a fancier and more elegant solution for rounded corner containers. *The .jzcontainer p{margin:0;} is specific to my layout and is not needed if you want to use this.
