Flexible floated two column CSS layout

There are many tutorials about how to make two column CSS layouts, and you have maybe seen one that looks similar. Anyway, here is a solution which is quite flexible when it comes to switching between four different placements of the menu; left, right, top and above the footer. Do you also want a design with 100% height you said? It's prepared for that also.

Furthermore, the content comes first in the HTML code (after the header, before the menu/columns) which may benefit search engines and screen/speech readers.

The different layouts are made without absolute positioning, only changes in floating and margins are done.

Our HTML

This is our HTML that we are going to make four total different layouts with.

1. <div id="mainContainer">
2. <div id="header"><p>My header</p></div>
3. <div id="content">
4. <p>My two column CSS content.</p>
5. </div>
6. <div id="column"><p>My column</p></div>
7. </div> <!-- Closing mainContainer -->
   
8. <div id="footer"><p>My footer text</p></div>
   

Our CSS for a two column layout with column aligned right

This is the CSS that is our basis for creating the different layouts. In this example the column is going to be right aligned. Later CSS codes in this article only shows differences from our "base" CSS.

1.  * /* Our "universal rule" */
2. {
3. padding: 0;
4. margin: 0;
5. border: 0;
6. }
7. body { text-align: center;}
8. #mainContainer {
9. width: 760px;
10. margin: 0 auto; /* We are going to center this design */
11. text-align: left; /* Since we used text-align: center in the body to be sure some older IE versions are going to center our design, we now align the text left */
12. }
13. #header {
14. background: #000;
15. color: #fff;
16. }
17. #content {
18. float: left; /* Our content is going to be left aligned */
19. width: 500px; /* And it's going to have a 500px width */
20. background: #D9D9D9;
21. }
22. #column {
23. float: right; /* Our column is going to be right aligned */
24. width: 260px; /* Our total width - content width is 260px */
25. background: #8A8AE6;
26. }
27. #footer {
28. clear: both; /* We have to clear our floats */
29. width: 760px; /* We need to set the width on the footer since it's outside the mainContainer, and therefor isn't controlled by it */
30. margin: 0 auto; /* We need to center the footer also */
31. background: yellow;
32. }

Our CSS for a two column layout with column aligned left

This is the CSS for our left aligned column. Differences from the "base" CSS are bolded.

1. #content {
2. float: right; /* Our content is going to be right aligned. */
3. width: 500px; /* And it's going to have a 500px width */
4. background: #D9D9D9;
5. }
6. #column {
7. float: left; /* Our column is going to be left aligned. */
8. width: 260px; /* Our total width - content width is 260px */
9. background: #8A8AE6;
10. }

Our CSS for a one column layout with top/header menu/text

This is the CSS for one column design with a top/header menu (or text as in our example). Differences from the "base" CSS are bolded.

1. #content {
2. float: left; /* Just float it left */
3. width: 760px; /* The same width as the mainContainer */
4. margin-top: 40px; /* We add some space for our 40px high top menu */
5. background: #D9D9D9;
6. }
7. #column {
8. float: left; /* Just float it left */
9. width: 760px; /* The same width as the mainContainer */
10. margin-left: -760px; /* Now we move the column 760px (the same amount as the mainContainer width) to the left */
11. background: #8A8AE6;
12. }

Our CSS for a one column layout with footer menu

This is the CSS for one column design with a top/header menu (or text as in our example). Differences from the "base" CSS are bolded.  And why would I place my navigation in/above my footer you said? Embrace your bottom was the inspiration for that.

1. #content {
2. float: left; /* Just float it left */
3. width: 760px; /* The same width as the mainContainer */
4. background: #D9D9D9;
5. }
6. #column {
7. float: left; /* Just float it left */
8. width: 760px; /* The same width as the mainContainer */
9. background: #8A8AE6;
10. }

Two column layout with right aligned column

Two column layout with left aligned column

Two column transferred to a one column layout with header menu

Two column transferred to a one column layout with footer menu

Some final words about this flexible two column CSS layout

Because the footer is outside the mainContainer, this solution is prepared for a 100% height with footer layout also.

The source code to this article is different from the explanations because all four layouts are presented within this article.

Publisert: 09-12-2006