TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

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).

Box 1

Which alters when it alteration finds, that looks on tempests and is never shaken. But bears it out even to the edge of doom. Mollit anim id est laborum...

Box 2

Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Mollit anim id est laborum. Ut enim ad minim veniam, cupidatat non proident...

Box 3

The balanced scorecard, like the executive dashboard, is an essential tool whether the organization's core competences are fully in line...

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
}

Take note 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

Take note 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.