Nested DIVs and Floats
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 or the HTML 5 "<!DOCTYPE html>" DOCTYPE at the start of your HTML document to set the browser to render the page in Standards Compliance Mode. Otherwise, you will lose cross-browser compatibility in many important areas.
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>.
Nested <DIV>s With Position Absolute
This text represents the body of this section of a typical document. Note that we have to set the right margin for the parent containing <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.
The CSS property "float" also takes the element out of the normal document flow, and allows it to "float" to either the left or right horizontal boundary of the containing element.
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.
Floated <DIV>
Note how this time we have a similar <DIV> positioned against the right-hand edge of the parent <DIV>, only this time if you resize your 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 the position of a floated element is flush against the left side or flush against the right side of the parent containing block-level element or any preceding floated element, with only the CSS margin setting to control its horizontal position. Vertical positioning of floated elements is done by the location of their HTML code in the document in relation to the adjacent elements.
If you resize your browser window, you'll notice that as the width of the window changes and the containing <div> boxes become narrower, the floated <div> retains its position within the containing block, but the surrounding text flows around the floated box, which is a nice design effect. But the main reason that floated elements are so popular these days is their ability to move entire sections of a web page within the boundaries of the browser window. This added web design flexibility is important in these days of smartphones and tablets where designers need to accommodate a much wider variety of screen sizes.
Content...
...
...
...
...
...
...
...
Content...
...
...
...
...
...
...
...
Floats & the 3 Column Layout
The common 3-column page layout was traditionally produced using <table>s, but is now generally created with floated <div>s. There are two sidebar columns with a center column to hold the primary content of the page. The basic structure works well enough on traditional screens, but for mobile devices where every pixel counts, there is rarely enough horizontal real estate available for everything to exist side-by-side. But the overwhelming majority of online audiences remain on more traditional screens, and their satisfaction is paramount. So how do we satisfy both audiences?
The answer lies is taking full advantage of floated elements to allow the vertical position of individual elements to change with respect to the available width of the browser window or, more precisely, the screen.
3 Column Responsive Design With Floats
Content...
...
...
...
...
Content...
...
...
...
...
Content...
...
...
...
...
In the box above, all three sections consist of floated <div>s with fixed widths, nested within a parent containing <div>. Note how the three floated <div>s are all aligned to the left edge of the container box which leaves a bit of ugly whitespace on the right. If you resize your browser window again so that it's narrower, you'll see how eventually, first the right column <div> and then the body content <div> get moved underneath each other creating a stack of content. This flexible design means even those with narrow screens, like those on smartphones and tablets, can see all of the content without having to shrink it to fit or scroll the window horizontally. The layout of this tutorial page doesn't lend itself to an ideal demonstration, but you can see the basic principle of responsive design here. The critical CSS for this page is contained in the <head> section, so you can use "View Source" to see it all. If we added CSS media queries, we could make further adjustments to the stylesheet so that the design was more elegant for all screen sizes.
This page was last modified on June 01, 2013
