Ruthsarian Layouts - 2col.v5

The background color for this column is actually a 200 pixel wide .GIF applied to the pageFrame element with background-repeat of repeat-y.

Background Colors

You can delete or change the background in the colors.css file, along with the background/foreground colors for any other element in this page.

When picking colors, try to use shades of the same color. It provides a more uniform, clean look and feel.

Another method in choosing a color scheme is to find something you see in life that you think is beautiful, then steal its color scheme. For example, if you see a poster that looks great, try using its color scheme in the layout.

Fonts

Font family (face type) and size can be changed using the theme.css stylesheet. This stylesheet is read in by Netscape 4 so some care should be taken with what is put in here. Or you could just @import this file which would basically hide it from Netscape 4.

One might look into shrinking the font size for innerContentColumn (the white background area) or increasing the font sizes used in the horizontal and vertical menus.

x x x x x this is to test the italics bug in ie x x x x x

You may copy any and all content, including stylesheets and HTML source, from this webpage. This work is presented for anyone who wants it, free of any copyrights or license restrictions. In other words, take my webpage, please.

This page includes links to all CSS files used on this page. This makes it possible to use a web site mirror tool to download this page and everything needed to display it in one action.

Primary Goals

A two-column layout using only CSS (ie. no tables) that allowed for a footer that could span both columns and appear at the bottom regardless of which column was "taller". Support all major browsers and degrade well in browsers with poor or no CSS support. This includes Netscape 4.

Secondary Goals

Be able to show the separation of columns in some manner (borders) using only CSS (ie. no images, background or otherwise). Include a masthead (trivial) and include menus based on unordered lists. Background colors for individal columns is possible but, presently, only through the use of a background image to act as one column's (usually left-hand column) background color.

The Basic Idea

The left-hand column has a specified width (200px in this case) and is floated left. The main (content) column does not have a specified width but is set with a left-side margin the same width as the left-hand column. The footer box has the CSS clear attribute set to left so that regardless of which column (left or content) is taller, the footer will always be at the bottom.

Important Details

The entire layout is encased within a parent DIV block called pageFrame. This allows for a margin to be applied to the entire page without having to edit the CSS properties of several different elements. It also allows for a very easy way to set this layout to a fixed width, should such a thing be desired.

The use of borders is fairly straight-forward. The only time things start to get tricky is with the border separating the left and content columns. The problem here is that if we define the border to belong to the left-hand column, that separating line will only be as tall as the left-hand column. If we switch it to the content column, then if the left-hand column is longer, that line is going to stop at before it reaches the footer. We are using a fluid layout so we have no way of knowing what type of settings the end-user has. So to cover both situations (left is longer than content, content is longer than left) both borders are defined and made to overlap.

To overlap borders we have to get pixel-perfect. This is why the left-hand column is set at 200px in width but the content column's left-hand margin is set at 199px. However this doesn't work completely in old browsers. Thus there is some extra CSS in the simple stylesheet dealing with widths and margins of the left-hand column that seem a bit useless. IE 4 needs a -200px right-hand margin on the left-hand column and Netscape 4 needs a 2px left-hand margin on the left-hand column. In the end, it works, and that's really what matters.

A Key Trick

Looking through the source for this page will show several instances (3) where there is a DIV block within which an inner DIV block is placed (Such as leftColumn contains innerLeftColumn). The reason for this is that IE and Mozilla (among other browsers) have varying methods for measuring the width and height of boxes. IE will include margin, padding, and borders within a specific width of a layout. Mozilla, conforming to CSS standards, takes the defined width of a box and then adds padding, borders and margin on top of it. This different in box models created a nasty problem web developers have been trying to solve for years. The most common solution has been to use the box model hack. However I have taken a different approach.

To solve the box model riddle, one box is placed within another. The outer block contains the width (and height) dimension attributes and only those two attributes which affect a box's dimensions. The inner box is where padding, border and margins can be applied. By using this method, both IE and Mozilla will render boxes correctly regardless of what box model is being used. In this way we can steer clear of using the box model hack. Not that the box model hack is bad or should not be used. It's just a personal taste to stay away from that particular hack.

Who Cares About Netscape 4?!

I do, because there's a greater point to be made. I just wish I knew what it was. It has something to do with trying to make an effort to support all your users, and that even if you only have, for example, an IE 6 user base, the exploration to support other browsers and the learning from that experience is more valuable than the time saved by ignoring the fringe.

But that might be a point of view shared only by die-hard CSS/web developers who are sick enough to actually enjoy that kind of exploration. We call them masochists.

Stylesheets Used & Their Purposes

simple.css

This is where any universally-browser-safe CSS goes. This stylesheet is the only thing that will be seen by Netscape 4 and any other old browsers with minimal CSS support. Thus enough needs to be here to generate this layout but it must be safe CSS.

complex.css

Any non-safe styles go here. This may crash Netscape 4 and other browsers that don't properly support even basic CSS.

complex_hnav.css

This stylesheet handles the layout of the horizontal menu seen above. If you want to delete that menu, simply remove this style sheet and the DIV block with the id of hnav from the source of this page and you will be all set.

complex_vnav.css

Likes the above stylesheet except this one is for the vertical menu seen to the left. Both menus are formed from unordered lists, meaning without these stylesheets the page will still render fine and the logic of the layout still works.

theme.css

This stylesheet is used to apply a theme over the base layout look. This is where font and color choices should go. Layout changes, such as border and column sizes, should not go here. This stylesheet is linked in such a manner that Netscape 4 will read it. So only safe CSS can go here.

colors.css

Default setup has this stylesheet imported in from theme.css. This is because Netscape 4 adds some space between the edge of a box and where its border is drawn. Meaning that boxes with a background color will have an area near the edge where you can see what's underneath that box. Ick. But, this is also a great way to help spread out the various aspects of the layout's styles and make it much more managable. Now one does not have to seek through long CSS files to find background-color entries. Here they are, and easy to manage.

CSS Hacks Used

CSS hacks are used in this layout. The reason being that there are some small bugs within individual browsers that can throw off the layout. The use of overlapping borders in this layout requires pixel perfection which only added to the need for CSS hacks. This layout tries to use only simple, valid CSS generating CSS hacks. The stylesheets contain some explanations of what CSS hacks were used and why.

IE and Italics

It appears that IE5/Win does not take the width of italicized text into consideration when calculating the width of a box and where to auto-wrap the text within said box. When the text is finally rendered inside the box, the wrapping positions are off and some lines are wider than the box. IE's rendering engine makes room by increasing the box's width. However all other boxes, which have already been sized, are now too wide to fit in the available space. This destroys the layout as IE tries to reposition all the elements within the page to satisfy all space (width) constraints.

In the case of this layout, we have a fixed-width floated left column box and a floated variable width content box on the right. Because of this bug, the content box is too wide to fit in the available space and gets pushed down below the floated left column. This is not desirable.

This article over at PiE addresses the issue I'm talking about.

The suggested solution is to set the overflow attribute to visible. This should have no effect on any other browsers because there will be no overflow as they will correctly calculate and layout the site. However for this layout, setting the height of the column(s) in question to 100% is also required.

This solution does not work for IE 5.0. One suggested solution is to decrease the width of the box from the expected size so that when IE increases the width, there is still enough room to fit. That doesn't work in this layout as the border between the left and main (content) columns is made up of the appropriate border being defined on each of those two boxes. If we're even 1 pixel off the border breaks.

The other suggested solution is to set overflow to hidden. IE 5.0 can handle this and worst case, the edges of a word or two get cut off, but that shouldn't happen very often, if at all. However, this fix doesn't seem to work with this layout. Most likely because of the nature of the boxes we're applying the fix to and all the other CSS applied.

After some trial-and-error a solution that works with this layout was found. Setting overflow to hidden and also applying a width of 100% and a height of auto seems to work. The IE float bug(s) are patched by setting a height of 100%. However, it appears IE 5.0 is float-bug free even with this fix applied, thank goodness. However, just to be sure, we use a couple hacks to keep the CSS in question from being applied to anything other than IE 5.0.

The complete solution may be found in complex.css.

© 2003 Anyone