Create a 3 column layout in Microsoft Expression Web 2 in 5 simple steps

I am a designer and frequently have clients who want a three column layout for their website. There are different ways to go about this, but the most important challenge is to automatically adjust according to the content in various browsers and resolutions. But creating perfect CSS layouts is a cakewalk in Microsoft Expression Web 2. Let us see how to create a three column CSS layout in Expression Web 2 in 5 simple steps.

  1. Launch Expression Web 2 and go to New > Page.
  2. Under the Page tab select CSS Layouts.
  3. There is a list of layouts with title, description and a preview in the same window.
  4. Choose ‘Header, nav, 3 columns, footer’ and click Ok.


Bingo! Your layout has been created. The best part is that you can always customize this layout by adding or removing any elements, viz. if you do not want a navigation bar given in this layout. Go to the Design view or code view and delete that particular navigation bar. Similarly you can add such other elements. But while adding new elements to the layout, you have to take utmost care about the dimensions of the layout.

5. Save your page. Expression Web 2 will prompt you to save your page and a CSS file that contains all the styles of your page. Preview your page.


Filed Under: Expression Web


About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (0)

Trackback URL

Leave a Reply