How to Convert a Fixed Column Layout to a Liquid

Converting your layout from fixed-width to liquid-width can be done using CSS code.

A website that has a fixed-width layout has code in the cascading style sheet file that sets the sections of the site's layout to a certain width in pixels. This means that the site will not resize to fit your computer's display screen. A website with a liquid-width layout has code in the CSS file that sets the sections of the site's layout width to a percentage of the view's display screen size. This means that the site will resize to fit the viewer's screen. You can change a fixed-width layout to a liquid-width layout by replacing the set widths in pixels with relative widths in percentages.

Instructions

1. Open the CSS file of the layout you want to change to a liquid width in your preferred HTML or plain text editor.

2. Locate the main wrapper in the CSS code. The main wrapper controls the width of the entire layout. It is usually located near the top of the CSS file, and it's selector name generally contains the word "wrapper" or "container" along with a word such as "Main" or "page" to explain that it is the main wrapper for the site. At the beginning of the selector name is a hashtag, and following the main wrapper is a list of properties, including "width."
   For example:

   #main-wrapper {
   width: 1000px;

3. Locate the "width" property in the list of main wrapper properties. Make a note of what the fixed width of the main wrapper is in pixels, then replace the width in pixels with "100%"
   For example, you would change this piece of code:

   #main-wrapper {
   width: 1000px;

   to

   #main-wrapper {
   width: 100%;

4. Locate each of the wrappers for the sidebars in the CSS file. They are usually located near the main wrapper code and have "sidebar" as part of the selector name.
   For example:

   #left-sidebar-wrapper {
   width: 200px;

5. Convert the width in pixels to the proportionate percentage of the site you want the sidebar to cover.
   For example, if the original width of the site was 1000 pixels, change this piece of code:

   #left-sidebar-wrapper {
   width: 200px;

   to

   #left-sidebar-wrapper {
   width: 20%;

6. Save the CSS file with the wrappers converted to percentages.

7. Open your preferred FTP client and log into your live Web server. Navigate to the location of the old CSS file on your website, and upload the CSS file by dragging it from the local computer side of the client to the live server side. Drop it on top of the old CSS file. Click "OK" to confirm that you want to overwrite the old CSS file.

8. Open your website in your Internet browser to see that it displays properly with your converted liquid layout.

Tips & Warnings

• Always make a backup of your website before changing files on the live server in case you make a mistake.

References

• Green-Beast.com: CSS Layouts - The Fixed, The Fluid, The Elastic