After posting I sat down and took the styling to pieces. This might help someone else.
I started off with just the <hr /> tag inside a <div> that had a 'clear: both' rule to stop it overwriting other elements. Then I applied the styling rule of style and hide from [1]. A bit of tweaking gave me a graphic from one side to the other with a gap for the margin graphics. Nothing particularly special here. Time to add in the left side. Wrapping that around the central <div> didn't cause any problems so I added the right side graphic. Hey presto! - it worked. Now I must of tried at least a dozen permutations to get this working and this isn't particularly different from some of the others (I don't have a history of attempts unfortunately) but I am glad it is working. The CSS: .content-pagesplitter { clear: both; } .content-pagesplitter-left { background: transparent url(../images/left_middlebar.jpg) top left no-repeat; } .content-pagesplitter-right { background: transparent url(../images/right_middlebar.jpg) top right no-repeat; } div.hr { height: 22px; margin-left: 54px; margin-right: 55px; background: transparent url(../images/center_middlebar.jpg) top center repeat-x; } div.hr hr { display: none; } and the source: <div class="content-pagesplitter"> <div class="content-pagesplitter-left"><div class="content-pagesplitter-right"> <div class="hr"><hr /></div> </div></div> </div> [1] http://www.sovavsiti.cz/css/hr.html Thanks, Graham Reeds. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/