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 <DIV>s within one another 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 <div>s as needed. An example of how this is used would be to contain <div>s 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 <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. 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 <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.

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 <div>s to create columns that offer a much more flexible layout.

Left Column

Content...

...

...

...

...

...

...

...

Right Column

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 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

Left Column

Content...

...

...

...

...

Body Content

Content...

...

...

...

...

Right Column

Content...

...

...

...

...


In the box above, all three sections consist of floated <div>s 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 30px 0 30px; padding:3px;
  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:450px; }
.floatRight { float:right; width:20%; padding:.5%; margin:2px 1% 2px 1%;
  border:solid 1px blue; background-color:skyblue; }
.floatLeft { float:left; width:20%; padding:.5%; margin:2px 1% 2px 1%;
  border:solid 1px blue; background-color:skyblue; }
.fixedWidth { width:30%; min-width:210px; background-color:pink; }

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 November 14, 2014




Host Gator Hosting



Copyright © 2005-2014 by Richard L. Trethewey - Rainbo Design Minneapolis. 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. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.


  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!