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