« Sunshine... makes me happy... | Main | Another CSS faux IFrame layout »

So, I've been pretty busy the last few days with this and that, but one of the "this-es" and quite a few of the "thats" have to do with a very interesting, but ultimately disappointing CSS idea. As I was idly playing with a page layout idea somewhere along the line, I wondered what would happen if I put a border on the body element... Well, I tried this out - over a couple of days, actually - and ended up with about 30 pages of experiments doing various things. Some of these ideas worked brilliantly in Mozilla, and some were very cool in IE. Then I worked out one idea that I thought worked perfectly in both, that is a really handy little way to solve an irritating problem. By creating a sidebar using a border on the body you can get over that nastiness with the background color on the sidebar not extending to the bottom of the page. In this example layout, I just gave left and right borders to the body, with the left border wide enough to act as a sidebar menu, then I used absolute positioning on the sidebar section, and voila, a sidebar whose background color extends as long as the main text area, even if the sidebar contents are much shorter. Sadly, though, this simply won't work in IE5. If you are using IE6, you can see how it looks on this page in quirks mode. If you are using IE5, well, you see how it is...

This is really a shame, because the layout is so straightforward and easy that it's really beautiful. if anyone figures out a way to make it work in IE5, please let me know! I did come up with a couple of fixes that were either too compicated and silly, or just totally defeated the whole purpose in IE. So far I can't figure out anything that preserves the lovely simplicity.

In other news, we have new patterns that I love, love, love!

Posted by taz on August 10, 2004 at 02:05 PM in CSS, My Layouts | Permalink


TrackBack URL for this entry:

Listed below are links to weblogs that reference CSS experiments using a Body Border:


This is a nice challenge! I will definitely look into it---already tried some z-indexing but no go. Seems like there should be a solution, though...

Posted by: headsfromspace | Aug 12, 2004 9:48:25 AM

Well I messed around with your body-border design and though I didn't solve the problem I came up with a few things:

> include all border tags on body (top and bottom too) to eliminate minor display problems at top and bottom of page.

> shorthand CSS on padding to eliminate double designation of padding tags:
ex. (padding: 0px 0px 50px 0px;)

> right and left margins on #box to ensure page background display in 800 pixel screen resolution. (The background image was disappearing when viewed in a lower resolution.)

I think this is a nice design so I'm gonna float the question in this CSS design mailing list and see if anyone out there has a solution.

Another thing: Did you include a full doctype on your html when viewing in IE5? I have IE5 at home but no internet connection, so I'm not sure what it really looks like live...just a thought...

Posted by: headsfromspace | Aug 13, 2004 11:16:53 AM

Hi, heads! Yes, I was looking at the xhtml version with the doctype. I am really glad you are interested in this because it seemed like it might be sweet. It would be interesting to see what some experts might make of it.

Posted by: taz | Aug 13, 2004 2:23:31 PM

Hello again! I've been offline for a few days but I just read an e-mail from someone at the CSS discuss group and am including his comments here. Haven't had time to play around with it yet but the solution is pretty simple:


Nice little 3-column, but...

The border is on the outside of body(!), and older browsers lack an
element there.
The html-element isn't really an element in those old browsers, which
mean that borders on body just make the body narrow.
Scrollbars is set on that narrow body, and the design fail in IE5-win.

The above may be better explained by others, but the solution is to
move those borders to a new element _inside_ body.
Reusing your styles, this works flawless:
body {margin: 0; padding: 0;
background: #667777 url(green100.gif) fixed;
font-family: georgia, times,
serif; font-size: 16px; }

#wrapper { border-right: 30px solid #445555;
border-left: 150px solid #445555;
padding: 50px;
width: auto; }


... content ...



"wrapper" carry the border, and "sidebar" can be absolute positioned
relative to body in all browsers. Both the html-element and body are now
covering the entire width, thus all browsers will position "sidebar" at
the same spot.

The same appearance can be recreated in a number of ways, but that
extra element (#wrapper) is needed for IE5-win.


Okay, so there it is. I think it will give you some ideas....

Posted by: headsfromspace | Aug 18, 2004 6:10:55 AM