The Major Benefits of Layouts....

The Major Benefits of Layouts in CSS

By: stefano sandano

One of the major features of CSS is the possibility to control page layout without needing to use presentational tools. However, CSS layout has gained a rather undeserved reputation of being difficult, particularly among those who are studying this language for the first time. This is partly due to browser problems like for example IExplorer 7, but mostly due to a proliferation of different layout techniques available on the Web. It seems that every CSS author has their own technique for creating multicolumn layouts, and new CSS developers will often use a technique without really understanding how it works. This “black box” approach to CSS layout may get quick results, but ultimately stunts the developer’s understanding of the language.

All the main CSS layout techniques rely on three basic concepts: positioning, floating, and margin understanding. The different techniques really aren’t that different, and if you understand the core concepts, it is relatively easy to create your own layouts with little or no hassle.

Long lines of text can be difficult and unpleasant to read. As modern monitors continue to grow in size, the issue of screen readability is becoming increasingly important. One way designers have attempted to tackle this problem is by centering their designs. Rather than spanning the full width of the screen, centered designs span only a portion of the screen, creating shorter and easier-to-read line lengths.

Centered designs are very important at the moment, so learning how to center a design in CSS is one of the first things most developers want to learn. There are two basic methods for centering a design: one uses auto margins and the other uses positioning and negative margins.

There are a few different ways of doing CSS-based layout, including absolute positioning and using negative margins. Float-based layouts the easiest method to use. As the name suggests, in a float-based layout you simply set the width of the elements you want to position, and then float them left or right.

Because floated elements no longer take up any space in the flow of the document, they no longer appear to exert any influence on the surrounding block boxes. To get around this, you will need to clear the floats at various points throughout the layout. Rather than continuously floating and clearing elements, it is quite common to float nearly everything, and then clear once or twice at strategic points throughout the document, such as the page footer.

Normally when webmasters create float-based layouts, they float both columns left, and then create a gutter between the columns using margin or padding. When using this approach, the columns are packed tightly into the available space with no room to breathe. Although this wouldn’t be a problem if browsers behaved themselves, buggy browsers can cause tightly packed layouts to break, forcing columns to drop below each other.

Another kind of CSS layout is the Fixed -width layout.Fixed-width layouts are very common as they give the developer more control over layout and positioning. If you set the width of your design to be 720 pixels wide, it will always be 720 pixels. If you then want a branding image spanning the top of your design, you know it needs to be 720 pixels wide to fit. Knowing the exact width of each element allows you to lay them out precisely and know where everything will be. This predictability makes fixed-width layout by far the most common layout method around the cascading style sheets.
.