Css Layouts

From CSS Discuss

This blog shows a different and unique way of Presentation Skill on the CSS Sheets topic and also clears many narrow points about the topic.

With CSS level 2, it is possible (and preferred) to lay out webpages purely using CSS. In the past, authors used Table Design to lay out pages, but this has significant disadvantages.

To get an idea of what type of design is possible with CSS, view our Show Case or any one of the many Design Inspiration sites out there.

See Css Positioning - a very brief summary of absolute, relative and fixed positioning.

There are different ways to use CSS in laying out pages:-

• Absolute Layouts : techniques based on "position: absolute"
• Float Layouts : techniques based on the "float" property
• Fixed Layouts : useful for frame-like layouts

Deciding between absolute and float layouts, the pros and cons:-

• Absolute Or Float Layout : pros and cons of each technique

Ready made layouts:-

• Three Column Layouts: many three column layout templates listed
• Two Column Layouts

Footer positioning:-

• Footer Info : demo links of footer positioning methods

How to make all columns appear the same height:-

• Any Column Longest

Emulating Frames:-

• Emulating Frames

Newspaper-like layout for more readable text:-

• Side Scrolling Narrow Column Layout

Make a footer appear at the end of a multi-column page using Javascript:-

• Multi Column Layout With Footer And Javascript

Non-conventional:-

• Border Slants : using borders to create the illusion of non-boxed shapes and layouts.