The main challenge in CSS web page layout is positioning blocks of content in different parts of the browser window. The key HTML element used to achieve this is the DIV element (short for DIVISION). The DIV element is pure vanilla: it has no inherent properties or sub-elements (unlike the TABLE element which was originally used for web page layout). It is a block element which can contain any web page content, including other DIVs.

Groups of related elements within the HTML page are placed within the various DIVs. For example, there might be a DIV containing a logo or banner, another containing navigation links, another containing the main content of the page, and so on. Another common practice is to place all DIVs inside an outer or wrapper DIV which acts as the overall container for the page content. Key attributes such as width and alignment can then be applied to this wrapper.

When controlling DIVs with CSS, the key DIVs being used for page layout will normally be given a unique ID; for example, div ‘id=”leftCol”‘. IDs can only occur once within an HTML page and can therefore be referred to in the CSS code; for example ‘#leftCol…’. Some subordinate DIVs (i.e. those contained within the main DIVs) will share attributes with several other DIVs on the page. These will be defined as a class in both the HTML page; e.g. ‘div class=imageLeft’ and in the CSS style sheet; e.g. ‘.imageLeft…’.

You will generally set the overall width you want your page content to occupy by setting the width of the outer wrapper DIV which contains the entire page. The width that you choose will depend on the typical monitor resolution used by your anticipated audience. The lowest common denominator is probably 800 x 600 pixels but many designers are now assuming 1024 x 768. Bear in mind that these pixel dimensions represent the entire screen. The actual web content will occupy only some of this. For this reason, designers usually use a width of 760 pixels when targeting the smaller resolution and 950 pixels when targeting the larger.

You can specify the dimensions of your content in two ways in CSS: using a fixed measurement or using percentages. Using pixels to specify the width you want your content to occupy offers you more control over your design but it can be inconvenient for visitors to your website. If their monitors are larger than your specified width, there will be a lot of wasted space. Those whose monitors are not as wide as your content will have to constantly scroll left and right to read your pages and who can blame them if they lose patience and go elsewhere. Percentage-based design is often referred to as liquid in that the content will simply readjust to fill as much of the available space as you specify.

Author is a developer and trainer with Macresource Computer Training, a UK IT training company offering ASP.NET Classes at their central London training centre.

ASP.NET master pages are a powerful feature which allows developers to create template-like pages which contain information that is common to all pages in a site or all pages in one section of a site such as corporate logo, company information, headers, footers and navigation links. Content pages can then be created which are based on the master page(s). Master pages use the file extension “.master” which is automatically protected by the server and cannot therefore be downloaded by clients.

The content pages consist of a reference to the appropriate master page together with the main page content and they use the regular ASP.NET file extension: “.aspx”. When the client requests a content page, the master and content pages are combined on the server and the resulting page sent back to the client.

Master pages use a combination of locked areas, which can only be edited from the master and content areas, which can be filled with unique content each time a content page is created. You can create as many content areas as you need, though the default of one in the head area and one in the body is usually enough.

To create a master page in Visual Studio or Visual Web Developer, choose Add New Item from the Website menu and click on the Master Page icon. As with regular ASP.NET pages, you can choose the coding language and specify whether code will be placed in an external file or embedded in the page itself. To create a content page, choose Add New Item from the Website menu, click on the Web Form icon and activate the option “Select Master Page”. When you click the Add button, a second dialog will appear allowing you to choose a master page.

Master and content pages provide web developers with a great way of controlling the structure and layout of all the pages in a site. In addition, when working on content pages in Visual Studio or Visual Web Developer, the master page elements are displayed in preview mode, so the developer can always see what the final, composite page will look like to the end user. Naturally, however, the master page items cannot be edited from the content page.

Some of you may be tempted to make a comparison between Dreamweaver templates and ASP.NET master pages. However, ASP.NET master pages are much more powerful. In Dreamweaver, all of the template markup has to be copied into each page based on a template. If the template is altered, each page based on the template has to be updated and then uploaded to the server. With ASP.NET master pages, the master page elements are automatically combined with the content page element at runtime by the ASP.NET engine. So when a master page is altered, there is no need to manually update the content pages.

Author runs ASP.NET training courses and ASP training in London and throughout the UK.