Two-Column Liquid Layout
A simple cross-browser two-column liquid CSS layout with fixed left sidebar
The search for the perfect CSS column layout has been likened to the quest for the Holy Grail, probably because both are so difficult to find. I think the reason why it's so hard to find the ultimate CSS column layout is because of the difficulty in determining what constitutes the perfect layout. There is a resulting lack of consensus due to the numerous and varied approaches of designing a CSS column layout and consequently there exists a myriad of differing perceptions of the ideal layout.
Like the search for the Holy Grail, the quest for the ultimate CSS column layout may be quixotic. Perhaps like our concept of beauty, the perfect CSS layout is in the eye of the beholder, or, maybe more accurately, it is in the mind's eye of the web developer. I don't profess to have found or created the perfect CSS column layout but I do believe my layout has its appealing features.
I don't really know if what I've created is truly unique or simply a regurgitation of a common method, idea, or concept already done to death numerous times before. All I know is that I tried my best to find the most suitable two-column CSS layout for my site and I couldn't find one, so I had to design one myself. I just pray that this, my humble contribution to the online community, helps people avoid the frustration I felt when I couldn't find a suitable two-column CSS layout among the chaos of all the other two-column CSS layouts. I hope this helps people find what they're looking for.
So why choose this CSS layout? What does this offer that others possibly don't? Here are a list of features I feel make my design different from other CSS column layout designs. I'm not really sure if there are other designs with the same features. Maybe I just haven't searched hard enough.
- Two-Columns - Duh. This layout contains a sidebar and a content section.
- Fixed-Width Left Sidebar - The sidebar column is on the left side and has a fixed width.
- Liquid Right Content Section - The content section is on the right side and has a variable width.
- Sidebar Code Placed Last - Not too many two-column layouts with a left sidebar have this feature. The HTML code for the sidebar and its content is listed after the HTML code for the content section. This makes it easier for search engines to locate the more relevant content section over the sidebar.
- Sidebar and Content Section Fills to the Bottom - This could be a differentiating feature that sets apart my design from other designs. Both columns will always be equal in length no matter how much or how little the content is in each column.
- Resizing Doesn't Break the Layout - Another potential differentiating feature. The layout holds together pretty well even when the browser window is shrunk.
- Cross-Browser Compatibility - Looks and performs the same way on IE 6, Mozilla/Firefox, and Opera. Most CSS layouts nowadays should work on all major browsers. These days, only the terminally brainwashed Microsoft will still target their design for a single browser.
- No Browser-Specific Hacks - All code works as is with all major browsers. No additional code targetted for or seen by a specific browser.
- Only Uses Plain CSS and HTML - An important distinction. Despite its special features, this layout does not rely on any image tags or Javascript.
- Relatively Simple Concept and Design - One more potential differentiating feature. Simple and easy to understand which makes it easy to implement.
- Relatively Flexible - The appearance can be modified by changing the background colors of the divs or adding divs, all without changing the basic layout.
There are two things I don't like about my design. The first is that it requires a lot of floats, in almost every div id. The second is that I had to add padding at the bottom for the look to be consistent across browsers. Nothing really significant. Just minor quibbles.
I encountered problems using tables; however, they're not specific to this layout but rather to all tables nested within divs. The percentage width of a table nested in a div is based on the width of the page instead of the width of the div. This can be easily remedied by adding a small TD column with a width of 1px following the last TD column.
Basically, you first have a normal two column layout with a right sidebar. In our HTML code, the right sidebar div is at the bottom of the content div just as it should be in an ordinary two column layout with a sidebar to the right. We then create a left margin equal to the width of the sidebar and then pull the right sidebar to the left to overlap the left margin. By overlapping the left margin with the right sidebar, we will only see one combined left sidebar. We pull the right sidebar over to the left by using a negative right margin for the content section.
|
|
|
Step 1
#left-sidebar {
width: 100px;
background-color: #2c2c2c;
float: left;
margin-top: 5px;
padding-bottom: 10px;
}
#main-content {
width: 100%;
background-color: #ffff00;
float: left;
}
#content-item {
background-color: #ffffff;
padding-bottom: 10px;
}
| ||||||||
|
Step 2
#left-sidebar2 {
width: 100px;
background-color: #2c2c2c;
float: left;
margin-top: 5px;
padding-bottom: 10px;
margin-left: -100px;
}
#main-content {
width: 100%;
background-color: #ffff00;
float: left;
}
#content-item {
background-color: #ffffff;
padding-bottom: 10px;
}
| ||||||||
|
Step 3
#left-sidebar {
width: 100px;
background-color: #2c2c2c;
float: left;
margin-top: 5px;
padding-bottom: 10px;
margin-left: -100px;
}
#main-content {
width: 100%;
background-color: #ffff00;
float: left;
}
#content-item {
background-color: #ffffff;
padding-bottom: 10px;
margin-right: 100px;
}
| ||||||||
|
Step 4
#left-sidebar {
width: 100px;
background-color: #2c2c2c;
float: left;
margin-top: 5px;
padding-bottom: 10px;
margin-left: -100px;
#main-content {
width: 100%;
background-color: #ffff00;
float: left;
}
#content-item {
background-color: #ffffff;
padding-bottom: 10px;
margin-left: 100px;
}
| ||||||||
|
Step 5
#left-sidebar {
width: 100px;
background-color: #2c2c2c;
float: left;
margin-top: 5px;
padding-bottom: 10px;
margin-right: -100px;
}
#main-content {
width: 100%;
background-color: #ffff00;
float: right;
}
#content-item {
background-color: #ffffff;
padding-bottom: 10px;
margin-left: 100px;
}
| ||||||||
|
Step 6
#left-sidebar {
width: 100px;
background-color: #2c2c2c;
float: left;
margin-top: 5px;
padding-bottom: 10px;
margin-right: -100px;
}
#main-content {
width: 100%;
background-color: #2c2c2c;
float: right;
}
#content-item {
background-color: #ffffff;
padding-bottom: 10px;
margin-left: 100px;
}
| ||||||||
|
Step 7
#main-content {
width: 100%;
background-color: #2c2c2c;
float: right;
margin-top: 5px;
}
#main-content {
width: 100%;
background-color: #ffffff;
float: right;
}
|
This page is my first web article. I learned CSS for the first time, over the course of a month, in trying to customize my Google Pages site, as well my Geocities site. I needed a three-column liquid layout for my Googe Pages site and a two-column liquid layout for my Geocities site. This page is a result of what I've learned in the six weeks since I started learning CSS, as well as my efforts in trying to come up with the most suitable two-column layout for this site.
It wasn't hard finding a sample of a two-column CSS layout on the web, but I had a hard time finding an example that met my criteria. I wanted an example of a two-column layout that was simple but could be nice and neat and easily implemented, was cross-browser but did not use any browser-specific hacks, had a fixed left sidebar and a liquid content area, could retain its layout even with different column lengths, and within the HTML code, the content area had to come before the sidebar.
It's actually very easy to make a two-column liquid CSS layout with a left sidebar, as long as, within the HTML code, the sidebar is listed before the content area. The reason why I wanted a left and not a right sidebar is that Geocities already places a sidebar on the right side of every page on the site. The reason I wanted the sidebar HTML code to come after the content code is because it's easier for search engines to index and rank a page if it can easily find the relevant content on a page. Placing relevant text content on a webpage first, before the sidebar, which may contain less relevant ad scripts, widgets, or links to internal or external pages, makes it easier for search engines to locate the relevant text.
Thinking that someone had already created the perfect two-column liquid layout, I set out to search for it using Google. The problem, I found out, was that, although there were many two-column layouts out there, the layouts from the most relevant results returned, did not fulfill my criteria. I could easily weed out the results for layouts that used a right sidebar or placed a left sidebar before the content. I also easily filtered out results for layouts that had a fixed width-content area. For the meantime, I also weeded out the results of layouts that had percentage-width sidebars which could be adapted for my needs if I couldn't find a suitable layout.
A few layouts I found from the first few pages of Google search results were promising. The problem with most of these was that they were difficult to implement, either because no simple, generic, sample source code was included, the CSS layout or HTML structure I considered uneccessarily complex or weird, or the layout relied on browser-specific hacks. I finally found a site which had a simple, easy, and logical CSS layout, included a generic source code you could easily plug into your page, and clear step-by-step instructions on how the code works. The problem was, it was for a three-column layout. I tried adapting it for a two-column layout but I couldn't get it to work.
I tried to implement a few CSS layouts that I chose from the first few pages of Google search results. After spending hours attempting to figure out how these CSS layouts worked and then trying to get them to work, I realized I wasn't making any progress. I could have kept searching on Google, and then trying out each and every layout to see if it could fit my criteria and then see if I could implement it properly; but that would have taken a seemingly endless amount of my time. I realized I was wasting precious hours using somebody else's design. I decided it would be better for me to go design my own layout.
I already knew how to customize a three-column Google Pages layout so I applied that knowledge in creating my original two-column layout. In a nutshell, my two-column layout is almost like a three-column layout with the right sidebar moved to the left, overlapping what would've been the left sidebar.
After finalizing my CSS layout design, I felt that I needed to document my creation. One reason was so that I could have a reference for how my layout works so I could remember or learn how to use it again in the future. Another reason was that, because of the difficulty I had in trying to find a suitable two-column layout for my site, I felt that other people shouldn't have to suffer or waste their time as much as I did. For those people, I provide this page and my CSS layout code. I hope you find it useful.
July 7, 2008