CSS Layouts

Benefits of Cascading Style Sheets

1. Separate content from presentation

you can separate your HTML markup, text, graphics and multimedia from
presentation.

2. Consistent site wide look and feel consistency

you can apply one style for 100s of web pages all at once. So if you had to change
the color of all pages on your site, you only have to edit one style sheet. This
saves you a huge amount of time, especially if you had to edit each page
separately.

3. Web site maintenance

apart from being able to make site wide changes easily through one CSS file, the
clean code it generates makes it easier to update. Properly marked up web pages
permit them to be maintained by more than one person. It will also work in more
browsers. Web site redesigns will take much less time.

4. Improve search engine rankings

search engines generally spider the code at the top of your web page first. For
most sites that means the navigation bar will be spidered first (resides at top of
page code). CSS enables you to position the code for your content at the top
making your page search engine friendly. Properly marked up HTML pages can
easily found and properly categorized by search engines

5. Fast loading
CSS reduces the amount of tags used therefore producing clean code. Tableless
design can reduce your load time by 25% to 50%.
6. Reduce bandwidth
compacting the amount of code used will reduce the amount of bandwidth needed
to host your web pages. Therefore you won’t have to pay higher fees when adding
more web documents to your site.

7. Accessibility
increasing accessibility with CSS means being able to serve web content to a
larger audience, increasing web site usability, even for non-disabled people.
Content can easily be formatted for projection as well as screen display. Tableless
layouts display well on hand-helds.

What is CSS layout?

CSS layout uses style sheets to define the placement of elements on a web page.
Typically CSS layout replaces tables, which are currently the most popular method
of placing page elements.

divs

The <div> tag was designed specifically to take over from tables as a layout tool.
It is a block-level DIVsion element that can hold whatever you need inside it. You
can have blocks of text in divs and then put them together in a layout. You have
immense freedom, with the ability to add these blocks, or layers, on top of each
other.

The div tag has few attributes of its own, with all of its formatting applied through
stylesheets.

div#navigation {width: 200px; background: gray; padding: 10px; }

<div id="navigation">...navigation links...</div>

This example code uses some very simple CSS code. All block-level elements can
have a width property, specified in units or as a percentage, and then I just added
a background colour and some padding space around the div content.

Block-level and Inline Elements

Most HTML tags fall into one of two groups: they’re either block-level elements or
inline elements. This is an important distinction. Block-level elements are used to
format whole blocks of text — they stand out on their own, spanning the available
screen-width and usually adding line breaks before and after themselves. Inline
elements can be introduced along the normal flow of text without causing any
major disturbance, and can be used to affect single characters.

The block-level tags are:

<div>
<fieldset>
<h1> — <h6>
<hr>
<legend>
<p>
<pre>
<ul>, <ol>, <li>, <dl> and <dd>

The rest of the tags are inline elements. The rules which govern these two
element types are simple, but important:

 Block-level elements can contain other block-level elements and inline

 elements

 Inline elements cannot contain block-level elements.

Layout Engine

Trident - Internet Explorer 4 to Internet Explorer 8

Tasman - Internet Explorer 5 for Mac; MSN for Mac OS X

Gecko - All Mozilla software, including Firefox; Galeon; Flock; also Epiphany

WebKit - Safari; Shiira; iCab 4; Epiphany; Adobe Air; Google Chrome; Midori;
OmniWeb; Adobe Dreamweaver CS4;

KHTML - Konqueror

Presto - Opera; Nintendo DS Browser; Internet Channel; future Adobe

Systems products

iCab - iCab 1-3

Prince XML - Prince XML

Amaya - Amaya

Types of CSS Layouts:

1. The Fixed. ( Fixed Width Layouts )

 2. The Fluid. ( Fluid or Liquid Layouts )
3. The Elastic. ( Elastic Layouts )

Which Cascading Style Sheet (CSS) layout is best? All have their quirks and their
unique pros and cons. Is one more accessible than the other? More usable? What
are the drawbacks and how are they dealt with? Is one easier to create than the
other? Is there an evil, inaccessible layout? I suspect some will say yes to this, but
I’m not going to. I like them all and feel all are suitable if steps are taken to ensure
easy usability and equal accessibility. All are part of a web site’s presentational
layer, so most of the accessibility relies on the extractable semantics and proper
usage of the underlying mark-up. What follows is my take on the rigid fixed, the
adaptable fluid, and the expandable elastic layouts.

Fixed Width Layouts

A fixed width site is one where the main wrapper is set to a specific immovable
width independent of the user agent’s display resolution. A common and
considerate fixed width is 760 pixels, a size that ensures users with 800×600
resolution monitors have close to full window viewing without annoying side-
scrolling.

The Fixed Width Pros

The main readable content area is tightly controlled without having to set
minimum-maximum width (which isn’t universally supported, anyway).

Fixed width layouts are sometimes easier to style depending on the effect you’re
after. Some visual designs can only be achieved in a reasonable manner with a
fixed width layout.

Based on the example width above — 760 pixels — the typical main content area
will be in my opinion an ideal width for optimum readability.
The Fixed Width Cons
People with small monitors (640×480 pixels) will end up with a horizontal scroll
bar on a 760 pixel fixed width site. This is a very uncommon problem.

A 760px fixed width site can look too narrow on large screen displays.

The narrow width can limit the reasonable number of columns and content, but
this may actually be a pro. Think forced moderation.

Fluid or Liquid Layouts

A fluid or liquid layout is created by not specifying a wrapper width at all or doing
so using the percentage unit of measure. In other words, barring borders and
padding screwing things up, a 100% width site will take up the entire view port
width without producing a horizontal scroll bar.

The Fluid Layout Pros

If done right, a fluid or liquid layout can adapt to just about any view port width
making it quite universal. This is seldom a reality, but in theory, and if care is
taken to ensure it, it is possible.

Fluid widths match the browser default layout method making this the “purist” of
them all. But does a developer’s want of site purity sometimes stand in the way of
usability? I think it may.
The fluid layout makes the most out of available screen real estate. More content
should be above-the-fold (meaning it’s available without scrolling in any
direction).

The Fluid Layout Cons

Too much available content and a strong desire to fill white space can be a
detriment to usability. Too much content can confuse the user and make a site too
congested or cluttered. There is an expression: “White space sells” and it’s a
truthful statement, even on the web.

If width limiters using the CSS property max-width — which isn’t supported by
Internet Explorer (IE) version 6 or older, by the way — aren’t supplied, you may
very well, in your quest for layout purity, create a site that is at best difficult to
use. Try reading a line of text that is over 1000 pixels wide and you’ll begin to see
the problem.

Elastic Layouts
An elastic site’s main wrapper and other elements are measured using ems as the
unit of measure. Ems are relative proportionally to the text or font size. Thus, as
the text size is increased, the sections measured in ems will increase in size as
well.

The Elastic Layout Pros

If done right, this is a very stable layout method because everything resizes at the
same rate. The result is nothing changes disproportionally.

An elastic layout is challenging and cool as hell. The first time I saw one was
Tommy Olsson’s site (which happens to be an exceptionally well done example of
how an elastic site should be done). This blew my mind, made me laugh, and
generally impressed the hell out of me. Elastic width sites are best enjoyed by
enlarging the text using ctrl and mouse scroll wheel… let me hear you say
“Zwoop.”

The Elastic Layout Cons

Aside from the cool factor, I don’t really see much of a benefit to this type of
layout. This makes me wonder what the point is.

Unless limited, this layout method can be a usability disaster as it’ll get wider and
wider and wider — without benefit.

Hybrid Layouts
Hybrid layouts use a combination of fixed and liquid elements.

A hybrid layout where the header and footer are set to full percentage width and
the content is set to a fix width, a very popular layout in today's websites.

Positioning

The position property is used to define whether an element is absolute, relative,

static or fixed.

absolute pulls an element out of the normal flow of the HTML and delivers it to a
world all of its own. In this crazy little world, the absolute element can be placed
anywhere on the page using top, right, bottom and left.

relative is much like static, but the element can be offset from its original
position with the properties top, right, bottom and left.
The value static is the default value for elements and renders the position in the
normal order of things, as they appear in the HTML.

fixed behaves like absolute, but it will absolutely position an element in reference
to the browser window as opposed to the web page, so, theoretically, fixed
elements should stay exactly where they are on the screen even when the page is
scrolled. Why theoretically? Why else - this works great in browsers such as
Mozilla and Opera, but in IE it doesn't work at all.

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}

#content {
margin-left: 10em;
}

<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>

<div id="content">
<h1>Ra ra banjo banjo</h1>
 <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo
banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

Floating

Floating an element will shift it to the right or left of a line, with surrounding
content flowing around it. Floating is normally used to position smaller elements
within a page

First You need

 Have understanding of CSS (Cascading Style Sheets)

 Have understanding of HTML
 Be familiar to the markup concept
 Understand the necessity of cross-browser testing
 Have some basic knowledge of accessibility guidelines