Build Fixed Columns

Category	: CSS		Views	: 9092
Version	: 2.0		Rating	:	2.3/5 (46 votes) Currently 2.30/5 1 2 3 4 5
Type	: Text

When it comes to how to freeze the width of your columns, rather than allowing them to resize on their own, you must know that it is a very easy thing. How can you do that? Follow these steps:

• Use a property value of the position: absolute.
• Now specify what will be the position and the size of your new column – In other words, set values for the left, top and width properties in pixels or inches.

The result will be something like the following piece of code:

Remember! Whenever you are using the absolute positions, you should make sure that the left property of the certain column works as it is supposed to. In the code above I have highlighted the exact places where you should be paying most of your attention – let’s say you have a first column of an x width (in our case 400px). To this x value it will be added the left value (15px in our case) which we will name y. Until now we have 1st width value plus 1st left space leading to a total of 415, therefore the second column will start somewhere at 430px. You continue doing the math in the same way as with these two columns if you want to add a third or a fourth column. Another thing you should keep in mind is that whenever you are using these absolute positions, any kind of padding will be ignored.

Now, let’s assume that you want to add several columns under these that we already talked about. You will be required to add several additional classes for these new columns. The two columns shown above have specific classes in this code – leftcolumn and rightcolumn. These classes have specified a certain top property which in this case is 80 px. Obviously, in order to insert columns below the already existent ones, you will need to enter a value lager than the top property value.

When does the "absolute" part actually kick in? Well, let’s say that the user’s that is browsing your website wishes to resize his browser window – in this case, you will see how "absolute" affects your columns. They will remain at the size that you set in the first place, without being affected by the resize.