CSS Containers: Simple, Fixed Width, Rounded Corners

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.

About the Author...

Jennifer Zelazny

My name is Jennifer Zelazny and this site is a collection of my random thoughts and opinions. I am Penn Stater, WordPress developer, and a modern day explorer. I love exploring data, trends, and things that make the world a better place and sharing them here.

2 thoughts on “CSS Containers: Simple, Fixed Width, Rounded Corners”

Leave a Reply

Your email address will not be published.
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.