I am assuming a typical column layout for our practical project. However, before I present this project live and in color, I would like to show you specifically how you can implement column layouts yourself. The focus here will be on two- and three-column layouts, as these still form the basis for the majority of websites.
The two-column layout is probably the classic in web design par excellence. The navigation is usually presented in the left-hand window area, while the actual content can be seen in the right-hand column. Incidentally, this behavior has changed somewhat in connection with blogs. In fact, in many blogs the navigation or advertising is displayed on the right, while the actual content is presented on the left.
Such applications are comparatively easy to implement in CSS. In fact, two-columns are the simplest layout form.
In the following example, I will show a two-column layout that gets by with absolute percentage values.
Here is the complete example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> #nav { position: absolute; left: 0; margin: 0; width: 20%; background-color:#66CCCC; } #main { margin: 0; margin-left: 20%; width: 80%; background-color:#6666CC; } </style> </head> <body> <div id="header">Layout with absolute positioning</div> <div id="nav">Navigation</div> <div id="main">This is the content area</div> <div id="footer">This is where the copyright information is located.</div> </body> </html>And this is how it looks in the browser:
You can easily move the left column to the right. Adjust the following instructions:
- With #nav, left: 0 becomes right: 0.
- For #main, simply change margin-left to margin-right.
Once the changes have been saved, the desired result can be seen.
However, the layout shown based on absolute positioning has one problem: If the content of the left column becomes more extensive, it runs over the footer area.
This is simply due to the fact that no space is "kept free" for absolutely positioned elements. The problem can be avoided by inserting content in the main area that is longer than the content in the left-hand column.
You should therefore only use this layout form if you are sure that the main area is actually higher than the left (or right) column.
A two-column layout with float
The problem encountered in the previous example with the overlapping footer area can be solved by using the float property. The modified syntax looks like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> #nav { float: left; margin: 0; width: 20%; background-color:#66CCCC; border: 0; } #main { margin: 0; float: left; border: 0; background-color:#6666CCCC; width: 80%; } #footer { clear: both; } </style> </head> <body> <div id="header">Layout with absolute positioning</div> <div id="nav">The area for the navigation</div> <div id="main">This is the content area</div> <div id="footer">This is where the copyright information is located.</div> </body> </html>Here, the two columns have each been given the float property. As a result, the columns are now arranged next to each other.
The left column is assigned a width of 20 percent. Pay particular attention to the fact that an element positioned using float really always expects a width specification.
The actual content area is given a width of 80 percent. This area is also positioned with float: left. As a result, this area is displayed next to the left column.
The following syntax is used so that the footer area is actually always visible in the lower window area - i.e. below the columns:
#footer { clear: both; }
I have already pointed out the possibility of defining a separate class for this variant.
Three-column with float
The three-column layout is also a popular variant in web design. A typical layout looks like this:
- The left column contains the navigation.
- The middle column contains the actual content.
- Additional information or advertising is displayed on the right.
Below you will find an example in which a flexible three-column layout is created. The syntax is - as you will soon see - quite similar to the two-column example shown above. However, there is now an additional div area with right, which ultimately represents the right-hand column of the window.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> #main, #right { margin: 0; border: 0; padding:0; } #nav { float: left; margin: 0; width: 20%; background-color:#66CCCC; border: 0; } #main { margin: 0; float: left; border: 0; background-color:#6666CCCC; width: 60%; } #right { float: right; width: 20%; background-color:#6699FF; } #footer { clear: both; } </style> </head> <body> <div id="header">Layout with absolute positioning</div> <div id="nav">The area for the navigation</div> <div id="main">This is the content area</div> <div id="right">This is the right-hand column</div> <div id="footer">This is where the copyright information is located.</div> </body> </html>
The new area has been assigned a width of 20 percent. The layout is therefore as follows:
- The left and right columns each take up 20 percent of the available display area.
- The middle column has a width of 60 percent.
Due to the syntax shown, the right area is actually displayed on the right.
However, the syntax is flexible in this respect. You could also adapt the main area as follows:
#main { margin: 0; float: right; border: 0; background-color:#6666CC; width: 60%; }
Here, float has been set to right. This moves the right area to the left.
In this tutorial you have seen how easy it is to define basic layouts based on float. This knowledge now forms the basis for building a website. In the next tutorials, a website will be created step by step, starting with the basic structure.
