CSS Boxes

Lean and Clean CSS boxes...

How to construct fancy CSS boxes keeping the IE5 broken box model out?

This solution does not require much markup or CSS declarations and gets around the IE5 broken box model nicely.

The 3 "rounded" boxes below are contained in the same DIV (a "float").

If we're setting a width for this element it is not only because "every float should have a width" but because doing so gives the boxes a fixed width without actually declaring any at their level (the "rule of thumb" to dodge the IE5 broken box model is that one can freely declare border and padding for an element as long as that element does not have a size specified).

The markup:

<div id="boxes">
<div id="box1"><h2>Heading 2</h2>
<p>Dummy text...</p>
</div>
<div id="box2"><h2>Heading 2</h2>                                      
<p>Dummy text...</p>
</div>
<div id="box3"><h2>Heading 2</h2>
<p>Dummy text...</p>
</div>
</div><!-- /boxes -->

The CSS rules:

#boxes {
float:right;
width:145px;
margin:10px
}
#box1,#box2,#box3 {
margin-bottom:20px;
background-image:url(bottom.gif);
background-position:left bottom;
background-repeat:no-repeat
}
#box1 h2,#box2 h2,#box3 h2 {
text-align:right;
padding:23px 30px 9px 0;
margin:0 0 0 -1px;
background:url(boxtop.gif) top no-repeat #ececec;
font-weight:600
}
#box1 p,#box2 p,#box3 p {
padding:9px 19px 24px 12px;
margin:0
}

The negative margin is to correct a 1px shift in MSIE Win. top is needed in the background shorthand declaration because in MSIE 5 Mac the heading inherits the position value from its parent and does not default to top left.

The 2 images:

1.                              bottom.gif is used for the Box

2.                              boxtop.gif is used for the Heading

If you use transparent GIFs, make sure to include a background color in the background declaration for H2 or the background image of the box will "show through" the heading.

 

Posted via web from designer173's posterous