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.
Typically, when using CSS for page layout, related elements within the HTML page are placed within the same DIV. 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.
The main DIVs that are 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 in London and throughout the UK.