CSS Tutorial Layout

Cascading Style Sheets offer several options for laying out your website and how they will be displayed on various resolutions. Your ultimate goal should be to reach as wide an audience as possible, for this reason we must consider the platforms used in other countries.

Some undeveloped countries are still operating on the old 800 pixel monitor, when creating a website it’s always good practise for a web designer to view the layout of their website through several different browser to weed out any compatibility issues, and the same rule should apply to resolution. Because your website looks fine on your desktop and your friends or even your computer at work, it’s important to check your site through various resolutions to see your site through the eyes of those who are less fortunate and do not have the latest shiny computer, these very people may make up a good percentage of your prospective audience.


CSS Fixed Layout

With the CSS fixed layout you specify a layout using columns to split up sections of your website. As an example the traditional site may have a horizontal header with three columns below (left, main container and right) with the footer below. This is usually defined using fixed widths for each area, this approach may result in the whole right column of your website dropping down and joining onto the bottom of your left hand column, if your site specifies a total width not supported by a system CSS by nature stacks columns in blocks, so the right column would fall off the side of the screen and settle nested below the left and column.

Most designers who opt to use the fixed layout will set an overall width of 800 pixels and will set both the right and left fields of the box attribute in the container to auto, the result can be seen in many sites that appear centred with a background taking up the right and left space left behind the actual website.


CSS Liquid Layout

This website uses a liquid layout, rather than specifying a set width for areas within the site we use percentages, this layout spans the entire width of the page; this will allow the site to auto expand OR contract depending on screen resolution used by the visitor. The result is you utilise every part of the screen and all your content will be visible no matter the resolution. If your widths are not set properly like above you will notice a horizontal scroll bar appear along the bottom of your page?


CSS Frame Layout

The CSS frame layout allows you to freeze certain areas of your site, as an example when you scroll down the page of a CSS fixed or liquid layout all the before seen content will disappear. With a frame layout you could have your header and navigation area remain static when the page is scrolled, so the visitor always has the main navigation and header visible, but the main content will still have the scroll function. To view an example of the frame layout in action visit Google images, you will notice the search bag along the top and the side navigation remains static as you scroll through the images displayed.


CSS Layout Tips


  • Search the web for other layouts you like
  • Keep the width dimension less than 900 pixels (if fixed layout)
  • Apply 20 pixel margins from left
  • Always apply 5 – 10 pixels of padding between columns
  • Try our Colour picker to help with design colour

comments powered by Disqus