Nested DIVs and CSS Float Tutorial
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 DIVs within one another or display them side-by-side, and thus position elements in relation to a parent block-level element that is itself relatively positioned in the document. Using 'float' is also powerful in these days of responsive website design where we all need to design for tablets and smartphones as well as the variety screen sizes found on desktop and laptop computers.
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.
Nested DIVs
A "nested DIV" is simply one div contained within another, as in:
div id="containingDiv" div id="nestedDiv"Some Content/div /div
The "containingDIV" provides a structure for the "nestedDIV" for positioning and other CSS properties. A containing div can hold as many child divs as needed. An example of how this is used would be to contain divs set to 'position:absolute', as in:
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 DIVs 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 DIVs 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. You can see the CSS stylesheet for this at the bottom of this page.
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 tables.
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.
Since elements set to 'float' are removed from the normal document flow, they can cause positioning problems for elements that follow them. Unless you insert an element with its CSS 'clear' property set, any content that follows a floated element will appear adjacent to it, rather than on the following new line. Fortunately, CSS provides a nifty way to alleviate the problem without messy HTML mark-up using a technique called clearfix.
Creating Columns with CSS Float
The 'float' property can be used for more than just allowing content to wrap around a block element. You can use it to build the structure of an entire webpage. Where you probably would have used a table in the past, you can use a set of nested divs floated side by side to create columns that offer a much more flexible layout.
Content...
...
...
...
...
...
...
...
Content...
...
...
...
...
...
...
...
Floats & the 3 Column Layout
The common 3-column page layout was traditionally produced using tables, but is now generally created with floated divs. 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 create a useable layout for all platforms?
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 divs with fixed widths, nested within a parent containing div. 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 principles of responsive design here. It relies on setting the width, margin, and padding for the block-level elements in percentages rather than pixels, with minimums that keep the content readable and which force a restructuring of the layout if the window gets too narrow.
The critical CSS for this page is shown below. These are all of the CSS rules that control the examples on this page. Note that they consist of a small set of classes, rather than a long list of element IDs. I did this to show how robust and flexible a responsive design can be without being needlessly complex. 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.
.cellContainer { position:relative; top:0; left:0; margin:0 2%; padding:0px;
background-color:#fff; border:solid 2px black; }
.cellTop { position:absolute; top:0px; right:0px; width:20%; padding:3px; margin:2px;
border:solid 1px blue; background-color:lightgreen; }
.cellBottom { position:absolute; bottom:0px; right:0px; width:20%; padding:3px; margin:2px;
border:solid 1px green; background-color:#f0f0f0; }
.cellContent { margin-right:22%; }
.cellCenter { float:left; min-width:45%; }
.floatRight { float:right; width:20%; padding:.5%; margin:0;
border:solid 1px blue; background-color:skyblue; }
.floatLeft { float:left; width:20%; padding:.5%; margin:0;
border:solid 1px blue; background-color:skyblue; }
.centerColBox { padding:0 .5em; overflow:hidden; }
.fixedWidth { width:32%; background-color:pink; }
More CSS Tutorials
CSS Positioning Tutorial
CSS Effects on Element Size
CSS Visibility Tutorial
CSS Centering Tutorial
CSS Vertical Align Tutorial
CSS Overflow Tutorial
Changing Stylesheets With JavaScript
When To Use Class or ID in CSS
Multiple Backgrounds in CSS3
How CSS Affects Element Size
Styling tables with CSS
See my article on CSS Responsive Design for a complete tutorial on using media queries to create flexible website design layouts.
This page was last modified on October 01, 2020
