One of the most powerful methods of web design with CSS is the use of absolute
positioning. The technique is most versatile when you understand that you can nest <DIV>s and
thus position elements in relation to a parent block-level element that is itself relatively
positioned in the document. As always, when using CSS for layout control you must include a
complete <!DOCTYPE> statement at the head of your document to force the browser to render
the page in Standards Compliance Mode. Otherwise, you will lose cross-browser
compatibility in some important areas. Here are two examples:
This is a nested <DIV> that uses absolute positioning to put it in the upper-right-hand corner of its parent <DIV>.
This is another nested <DIV> that uses absolute positioning to put it in the lower-right-hand corner of its parent <DIV>.
This text represents the body of this section of a typical document. Note that we have to set the right padding for the parent <DIV> to account for the presence of the absolutely-positioned <DIV>s because absolute positioning takes them out of the normal document flow and without protecting their section of the parent <DIV>, they would simply overwrite this content and resulting in a jumbled mess. Try resizing the browser window to see how these elements adjust automatically. Note, however, that this text never flows around the nested content boxes. In most circumstances, this is not the effect you're going to want. In the next section you'll see a solution to this problem.
This is a floated <DIV> that makes a nice inset in the document. The content of the parent <DIV> is wrapped around it so there's no block of white space underneath it as there might be using <table>s.
Note how this time we have a similar box positioned against the right-hand edge of the parent <DIV>, only this time as you resize the browser window, the main contents of the parent <DIV> flow naturally around the nested content. This is a great way to insert a graphic or a pull-quote. Note, however, that you have to position a floated element flush against the left side or flush against the right side of the parent bounding block-level element. Vertical positioning of floated elements is done by adjusting where the code appears in the document. You cannot control the positioning of a floated element as you would an absolutely-positioned element, but you can usually come very close.
CSS Tutorial Main Page
Tools and Scripts Menu
Copyright © 2005-2009 by Richard L. Trethewey. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission.
Rainbo Web Design Sitemap
Website Design by Rainbo Design Main Page
