Nesting and Floating Elements
Nesting <div> elements: Remember, we referred earlier to the <div> element as a "box" or "container" element. Many XHTML elements can be placed in a container, including other containers. This is known as "nesting" elements and is fairly common when building websites.
A nested <div> example: <head> <style type="text/css"> .yellow { width:400px; height:400px; background-color:yellow; } .blue { width:200px; height:200px; background-color:blue; .pink { width:100px; height:100px; background-color:pink; </style> </head> Here we have placed a container (pink) inside another container (blue), which itself is inside a parent container (yellow). <div class="yellow"> <div class="blue"> <div class="pink"></div> </div> <!-- blue --> </div> <!-- yellow --> Notice the comments added to the last two closing </div> tags. These can help us later, especially when there is a lot of code between the opening and closing tags.
Floating elements: So far, we have been building our pages vertically. Once we placed an element (such as a paragraph, image, or div) on a page, the next element automatically appeared below it on the page. To better use the real estate on a web page, we need a way to arrange elements horizontally on the page also. This is accomplished via the "float" property in CSS.
Floating <div> elements: <head> <style type="text/css"> .first { width:100px; height:100px; background-color:blue; float:left; } .second { background-color:yellow; </style> </head> More content. More content. More content. More content. More content. When we float elements, subsequent content stays at the same horizontal level and uses whatever space remains. Once that space is used up, the content will "wrap" to the beginning of the next line. <div class="first"></div> <div class="second"></div> More content.<br />
Floating right and left: <head> <style type="text/css"> .first { width:100px; height:100px; background-color:blue; float:left; } .second { background-color:yellow; float:right; </style> </head> More content. More content. More content. More content. More content. We can also float elements to both the right and left sides of the page. The subsequent content will still behave the same way, filling whatever space remains untaken by the floated elements. This is commonly done to create a web page with three columns. A navigation bar will be floated left, an information bar floated right, and the main content will reside in the middle of the page. <div class="first"></div> <div class="second"></div> More content.<br />
Clearing the float: <head> <style type="text/css"> .first { width:100px; height:100px; background-color:blue; float:left; } .second { background-color:yellow; float:right; .clearfloat { clear:both; </style> </head> More content. More content. More content. More content. More content. If we want to force the next element to start below the floated elements, we can clear the float. <div class="first"></div> <div class="second"></div> <div class="clearfloat"></div> More content.<br /> . . .