Alternative Layout 3

Trying to use rounded corners in elastic layouts is no small feat. It makes other things we did in this course seem relatively easy. (Hard to believe, but true).

But someone is bound to ask about it. So I offer up this page as an example.

The basic layout is the same as in all other layout examples. But everything has a white (#fff) background color, which gets rid of the boxy look.

The boxes you do see, with rounded corners, are graphic images. You can see them in the RoundedLayout folder. You need some fancy graphics editing skills to create the boxes. And the code in the page and style sheet is fairly complex. You'll see the code, with comments here in the source code for this page (layoutRounded.htm) and its style sheet (layoutRounded.css).

There are actually many techniques for rounding corners in CSS 2.1. Search Google for CSS rounded corners and you'll see what I mean. But they're all "hacks" to some extent. And few work properly in elastic layouts.

This sort of layout will be much easier in CSS 3 than it is with CSS 2.1. When will CSS 3 be something we can actually use? There is no way to know that. The W3C has been working on it seemingly forever. So hopefully we won't have to wait too much longer.

This is a sample para­graph in the left­column division. You can put any text you want here.

nerd

Here is a second paragraph, just to make the left column a little taller.