1 / 7

Nesting and Floating Elements

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.

elliot
Download Presentation

Nesting and Floating Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Nesting and Floating Elements

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

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

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

  5. Floating <div> elements: <head> <style type="text/css"> .first { width:100px; height:100px; background-color:blue; float:left; } .second { width:100px; height:100px; background-color:yellow; float:left; } </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 /> More content.<br /> More content.<br /> More content.<br /> More content.<br />

  6. Floating right and left: <head> <style type="text/css"> .first { width:100px; height:100px; background-color:blue; float:left; } .second { width:100px; height:100px; 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 /> More content.<br /> More content.<br /> More content.<br /> More content.<br />

  7. Clearing the float: <head> <style type="text/css"> .first { width:100px; height:100px; background-color:blue; float:left; } .second { width:100px; height:100px; 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 /> . . .

More Related