About The Layout

This is a responsive, two-column layout where the main content (left) column is fluid up to a defined width and the sidebar (right column) can have a minimum and maximum width set and be fluid between those two points depending on the size of the viewport. This helps maximize available viewport space while keeping the content from expanding so wide that it creates strain on the reader. While the content of each column can be limited to a certain width, the background color of each column will continue to the edge of the viewport.

Using This Layout

The HTML and CSS used to construct this layout are released into the public domain. This means you may copy, alter, and distribute this layout however you wish, in any endeavor, without any need to compensate or attribute its author.

If you do choose to use this layout, I recommend making better color and font choices than those used here. This is what the theme stylesheet is for.

Two Column Layout Mechanics

To create a two-column layout you only need to specify a width for both columns (for exaple 70%, 30%) and float them so that they appear next to each other. But what if you want a background different background color for each column? You could specify a background color on the element containing each column, but that color would only fill down for as tall as the content of the column. If the heights of the two columns are different, the where the background color ends for the columns will be different and it can end up not looking very clean.

To have background colors that are the same height a block element, such as a DIV, is used to frame the two columns. Space for one of the columns (the sidebar) is then created for the column using the border property of the frame element. The color of this border will become the background color for one column. The background color of the frame element becomes the background color for the sidebar. The two columns are then floated and the sidebar is then positioned over the border of the frame element using negative margins. The layout will now appear to have two columns of equal height even though the content of the columns are actually of different height.

This layout uses a similar approach. The difference here is that right-side margin, instead of a border, is used to create the space for the sidebar. This means the background color of the BODY element becomes the background color for the sidebar and the background color of the frame element, #page-frame, is the background color of the main column.

Maximum Color, Minimum Content Width

One of the goals of the layout is that the content, that is the content in both columns, have a maxmimum width. If the viewport goes wider than that maximum, the content should stop expanding, but the background colors of the two columns should continue to expand to the edges of the viewport. The content itself should remain in the center of the viewport.

One way to do this is to split the columns up with percents, such as 70% width for the main column and 30% width for the sidebar. Wrap the content of each column in another DIV with a max-width value (and float each column towards the other column) and the content will stop growing wide at a certain point. Problem solved. Except the content doesn't remain centered in the viewport. The content, once the viewport width goes wider than the max width, will be off-center and grow more off-center the wider the viewport gets.

Another approach is to wrap the content in a DIV element with a max-width set and the left and right margins set to auto. This will automatically center the content to the viewport. The problem is keeping the background colors for the columns lined up with the columns themselves. Once the viewport goes wide, the content and color split will be offset and it won't look right.

An approach that I used during my initial development of this layout was to set a max-width on the frame element with left and right margins set to auto. This keeps the content in the middle of the page. I then use the CSS3 linear-gradient method to render a background image on the BODY element which splits the background color in half. The frame element is then also given a background color. This allows the color for each column to extend to the edge of the viewport with the background color of the frame element covering up the 50/50 split of the BODY element's background colors. However I found this approach not very compatible with older browsers which did not support the CSS3 linear-gradient method.

A more compatible method that I then tried was to create a DIV element that was fixed positioned with a z-index of 0 that was set to a width of 50%. This, along with the BODY element, provided a method to split the background color similar to the linear-gradient approach, but maintain compatibility with older browsers. This felt like a cheat to me for some reason and I wasn't happy with it, but it worked and is how I was going to release this layout.

This Layout's Solution

What this layout does is apply several different approaches to rendering the layout depending on the width of the viewport. Media queries are used to switch between them, with the default layout a fluid left, fixed right design that is compatible with older browsers. Those browsers that support media queries will see changes to the layout based on the width of the viewport.

Viewports narrower than a specific minimum width will see the layout as a single column. This is accomplished by simply un-floating the left and right columns.

Viewports wider than the minimum width will see a two column layout with the right column a fixed width. This uses the traditional approach where the right-side margin of the frame element reserves space for the column which is then positioned over that space using a negative margin value. The right-margin of the frame element and the right column width are specified in pixels.

Viewports wider than a certain width will see a fluid right column. The right-margin of the frame element and the width of the right column are now specified using percentages rather than pixels to create this fluidity.

Viewports wider than another certain width will see the right column become fixed width again. This is to prevent the fluid right column from growing too wide. The left column remains fluid. The right-margin of the frame and the column width are again specified in pixels. There are a few reasons for having a maximum width for the right column, but for me the biggest reason is that after a certain point the right column felt too big. You can play with these values in the CSS and see what you prefer. It's certainly possible to keep a fluid right column all the way up to the point the viewport goes wider than the desired max-width for the content.

When the viewport goes wider than the desired max-width of the content, the content needs to be centered in the viewport. To accomplish this the BODY element is given a padding-right value of 50%, essentially cutting the viewport in half. The content can then be shifted right 50% the width of the content to position it right in the middle of the viewport.

A thing to keep in mind when the viewport goes very wide is that the frame element is still providing the background color for the left column. It has to keep expanding to the left-edge of the viewport, but the content of the left column should not. This requires the main content column to have its own max-width set to prevent it from going too wide. Since we know how wide the content will be at max-width, and we know how wide each column will be when max-width for the content is reached, we know what max-width value to set to the left column so it does not continue growing.

Don't Panic

The layout stylesheet has all the formulas you'll need to calculate out all these intricate values to get everything positioned exactly where it needs to go. There's also further discussion on how the layout operates in the CSS.

This Is Not Mobile First Design

A design paradigm growing in popularity in recent years is the idea of designing a layout mobile-first. Meaning you create the layout as you want it to appear in a mobile web browser. You then add on the appropriate CSS media queries to alter the layout for viewports larger than typical mobile devices.

What makes this approach smart is that it aids developers in creating layouts that are compatible with older browsers. Typically you wouldn't mess with multiple columns and get heavy into floating elements which tend to break very badly in older browsers that know just enough to screw it all up.

This layout isn't designed in that way.

There's an annoying gap in browsers, specifically Internet Explorer, where IE's rendering engine is good enough to handle floating elements well, but which doesn't understand media queries. This is especially true for those people still running the now deprecated Windows XP. Sadly, this is not a small group of people. Now the harsh, but perhaps correct thing, to do is to make these older browsers eat a mobile layout at full screen and get them to upgrade their system. I'm not going to be that harsh. So what this layout does is target average viewports and will modify the layout if you're on a narrow (mobile) or very large (high resolution screen) viewport.

But if you're a mobile-first kind of designer, that's okay. Converting this layout isn't difficult at all. Just add all the CSS inside the max-width media query to the root level of the stylesheet and any invert those changes into a new min-width media query. Or just don't worry about it.

A Bunch of Text

Pellentesque turpis nisi, ullamcorper id suscipit et, tempor ac magna. Quisque tristique dapibus nisi vel eleifend. Quisque ullamcorper turpis eros, at varius magna condimentum non. Donec risus libero, venenatis id est eget, porttitor adipiscing arcu. Vivamus quis nisl vitae nisl commodo rhoncus vel vitae ligula. In hac habitasse platea dictumst. Nam semper, metus non sagittis consectetur, metus neque aliquet nisi, at tempus metus nibh ut velit.

Donec iaculis ut tellus id pretium. Integer luctus feugiat lectus. Aenean eu porta purus. In sapien nisl, tristique at commodo eu, tempus non diam. Cras porttitor scelerisque rutrum. Pellentesque eros nunc, congue non bibendum et, facilisis ut orci. Mauris laoreet erat ut rhoncus interdum. Phasellus gravida faucibus purus sit amet ullamcorper.