Displaced box for heading

Here is some text to fill out the basic text box that I have placed on the screen so that the effect can be illustrated.

Displaced box for heading

By putting a bottom border on the content to move it down a little the repeat use of the heading and content boxes can work without any additional code.

Second Example

Notice that most of the HTML and CSS code can be reused. All that is needed is a second reference box placed in the XHTML code and defined in the CSS.

Displaced box for heading

As all of the other styles are relative they can be reused in the new position and they will work properly as they take their position from the surrounding box.