Using CSS to Create 3 Columns from DIVs

Consider the following code where we have 3 DIV elements nested inside another DIV element:

<div id="container">
   <div id="col1">
      Col 1
   </div>

   <div id="col2">
      Col2
   </div>

   <div id="col3">
      Col 3
   </div>
</div>

To format such elements into 3 columns, we will use the following CSS code:

#container {
   background-color: White;
   float: left;
   width: 100%;
   border: 1px solid Black;
}

#col1 {
   background-color: Red;
   float: left;
   width: 20%;
}

#col2 {
   background-color: Blue;
   float: left;
   width: 60%;
}

#col3 {
   background-color: Green;
   float: left;
   width: 20%;
}

Click for Demo

Using Web Open Font Format (WOFF) for Arabic and Urdu

WOFF is font format especially designed for the web. Developed in 2009, it is the future standard format that will be adapted by W3C. WOFF is basically an encoding/compression technique by which other fonts will be packed and ready for download with the web page just like images.

This way the developer can design using any font and the look-n-feel will remain the same.

Converting fonts to WOFF format

There are many tools available to convert fonts to WOFF format:

1. Online Font Generator (http://www.fontsquirrel.com/fontface/generator)
2. The FontForge tool, but the WOFF support is not fully added.
3. The sfnt2woff command line tool available for Windows and Mac on http://people.mozilla.com/~jkew/woff/
   Command example:

   sfnt2woff.exe <fontname>.ttf

Using WOFF fonts in Web pages

1. The converted WOFF fonts can be placed in the web directory (for example under fonts directory).
2. Next, the CSS needs to applied:

   @font-face {
      font-family: "myFont";
      src: url("fonts/myfont.woff");
   }

3. This will add the font with the name myFont as a resource.
4. This can now be referred to any text as:

   font-family: 'myFont', 'serif';

5. The font will be downloaded and then applied to the web page.

The Problem with Arabic and Urdu fonts

There are however certain problems when it comes to Arabic and Urdu fonts. The conversion results in an error. So for the time being the conversion tools are not suitable and appropriate for Arabic and Urdu fonts.