HTML Based. How to change columns width

This tutorial will show you how to change the columns width in any HTML based template. This technique can also be used for the customizing of any CMS and E-commerce template.

• 1) First you need to do is to open the HTML file in your editor and locate the column code.

  
  Welcome to CRC Phone Repair.
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse moles- tie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  
  
  
  all makes of cell phones and PDA´s
  iPod and mp3 players
  
  
  
  video game devices
  laptops
  
  
  				read more
  			
  
  
  
  

• 2) When you’ve located the HTML code for the column you are able to see the class assigned to it. Now you need to open the file located in the folder "CSS" – grid.css and locate the class of the column.

  .container_12 .grid_8 {
  width:320px;
  }
  

• 3) Edit the width property of the first column and save the file.
• 4) Now you need to locate the HTML code for the second column to locate the class assigned

  
  
  
  
  
  
  GadgetRepairSpecialist
  
  
  
  			Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
  
  				read more
  			
  
  
  
  

• 5) Open grid.css file, same as for the first column and locate the second column by its class, edit the width property

  .container_12 .grid_4 {
  width:500px;
  }
  

• 6) Now your website columns have different width and it works properly.

As an alternative you can change the div class in the HTML file. Check the width attributes for different .grid classes in the grid.css file and use the necessary one

Feel free to check the detailed video tutorial below:

HTML Based. How to change columns width