| One of the major features of CSS is the possibility | | | | easiest method to use. As the name suggests, in a |
| to control page layout without needing to use | | | | float-based layout you simply set the width of the |
| presentational tools. However, CSS layout has gained | | | | elements you want to position, and then float them |
| a rather undeserved reputation of being difficult, | | | | left or right. Because floated elements no longer take |
| particularly among those who are studying this | | | | up any space in the flow of the document, they no |
| language for the first time. This is partly due to | | | | longer appear to exert any influence on the |
| browser problems like for example IExplorer 7, but | | | | surrounding block boxes. To get around this, you will |
| mostly due to a proliferation of different layout | | | | need to clear the floats at various points throughout |
| techniques available on the Web. It seems that every | | | | the layout. Rather than continuously floating and |
| CSS author has their own technique for creating | | | | clearing elements, it is quite common to float nearly |
| multicolumn layouts, and new CSS developers will | | | | everything, and then clear once or twice at strategic |
| often use a technique without really understanding | | | | points throughout the document, such as the page |
| how it works. This "black box" approach to CSS | | | | footer. Normally when webmasters create |
| layout may get quick results, but ultimately stunts | | | | float-based layouts, they float both columns left, and |
| the developer's understanding of the language. All the | | | | then create a gutter between the columns using |
| main CSS layout techniques rely on three basic | | | | margin or padding. When using this approach, the |
| concepts: positioning, floating, and margin | | | | columns are packed tightly into the available space |
| understanding. The different techniques really aren't | | | | with no room to breathe. Although this wouldn't be a |
| that different, and if you understand the core | | | | problem if browsers behaved themselves, buggy |
| concepts, it is relatively easy to create your own | | | | browsers can cause tightly packed layouts to break, |
| layouts with little or no hassle. Long lines of text can | | | | forcing columns to drop below each other. Another |
| be difficult and unpleasant to read. As modern | | | | kind of CSS layout is the Fixed -width ed-width |
| monitors continue to grow in size, the issue of screen | | | | layouts are very common as they give the developer |
| readability is becoming increasingly important. One | | | | more control over layout and positioning. If you set |
| way designers have attempted to tackle this | | | | the width of your design to be 720 pixels wide, it will |
| problem is by centering their designs. Rather than | | | | always be 720 pixels. If you then want a branding |
| spanning the full width of the screen, centered | | | | image spanning the top of your design, you know it |
| designs span only a portion of the screen, creating | | | | needs to be 720 pixels wide to fit. Knowing the |
| shorter and easier-to-read line lengths. Centered | | | | exact width of each element allows you to lay them |
| designs are very important at the moment, so | | | | out precisely and know where everything will be. This |
| learning how to center a design in CSS is one of the | | | | predictability makes fixed-width layout by far the |
| first things most developers want to learn. There are | | | | most common layout method around the cascading |
| two basic methods for centering a design: one uses | | | | style sheets. Mastering css discipline is a way to |
| auto margins and the other uses positioning and | | | | create wonderful and light websites with elegant |
| negative margins. There are a few different ways of | | | | layouts and nice colors. Css is the only way to resist |
| doing CSS-based layout, including absolute positioning | | | | to the changements of the way of designing |
| and using negative margins. Float-based layouts the | | | | websites. |