CSS Layout | layers, absolute and relative positioning and floating elements. Path // → → CSS LAYOUT One of the major benefits of using CSS is that you’re no longer forced to lay your sites out in tables. The layout possibilities of CSS give you complete control over the positions and dimensions of all page elements. If you’ve tried laying out a page with tables, you have probably been irritated in the past by the inability of your browser to render your page exactly as you had wanted.
Table structures aren’t the most flexible of page layout devices, as they weren’t really designed for this purpose. Now however, with some reliable browser support in the current generation of browsers, you have a new and much improved option. This page was last updated on 2012-08-21 Working with divs The <div> element is well-suited to take over from tables as a layout tool. The div tag has few attributes of its own (save for align="left | right | center"), with all of its formatting applied through stylesheets.
<div id="navigation">...navigation links... Floating Elements Column 1. CSS - Contents and compatibility. CSS Browser Compatability. CSS and Spacing | margins, padding and display types in CSS. Path // → → CSS AND SPACING So by now you have your page and all your text styled and formatted the way you want. Now it's time to start giving parts of your page room to breathe, by spacing them out with margins and padding. Henceforth, you will be able to space out all your page's parts down to the pixel. This page was last updated on 2012-08-21 The CSS Box Model The box model is a very important concept, one that you must have right in your head before you start tackling all this spacing stuff. All HTML block-level elements have five spacing properties: height, width, margin, border and padding.
CSS Borders are discussed in a separate tutorial. When using these properties, we're primarily working with the <div> tag, which you may not have been properly introduced to yet. All block-level elements also have the properties width and height. This paragraph will take up 610 horizontal pixels on the page, as a padding of 5 pixels is added on to each side. Margins Padding There we are. IE5 Bug. Referensböcker.