Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

5.2 nesting and floating elements

1,096 views

Published on

Published in: Education, Technology
  • My struggles with my dissertation were long gone since the day I contacted Emily for my dissertation help. Great assistance by guys from ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • My struggles with my dissertation were long gone since the day I contacted Emily for my dissertation help. Great assistance by guys from ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

5.2 nesting and floating elements

  1. 1. Nesting and Floating Elements
  2. 2. Nesting <div> elements: <ul><li>Remember, we referred earlier to the <div> element as a &quot;box&quot; or &quot;container&quot; element. </li></ul><ul><li>Many XHTML elements can be placed in a container, including other containers. </li></ul><ul><li>This is known as &quot;nesting&quot; elements and is fairly common when building websites. </li></ul>
  3. 3. A nested <div> example: Here we have placed a container (pink) inside another container (blue), which itself is inside a parent container (yellow). <head> <style type=&quot;text/css&quot;> .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> <div class=&quot;yellow&quot;> <div class=&quot;blue&quot;> <div class=&quot;pink&quot;></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. 4. Floating elements: <ul><li>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. </li></ul><ul><li>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 &quot;float&quot; property in CSS. </li></ul>
  5. 5. Floating <div> elements: 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 &quot;wrap&quot; to the beginning of the next line. <head> <style type=&quot;text/css&quot;> .first { width:100px; height:100px; background-color:blue; float:left; } .second { width:100px; height:100px; background-color:yellow; float:left; } </style> </head> <div class=&quot;first&quot;></div> <div class=&quot;second&quot;></div> More content.<br /> More content.<br /> More content.<br /> More content.<br /> More content.<br /> More content. More content. More content. More content. More content.
  6. 6. Floating right and left: 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. <head> <style type=&quot;text/css&quot;> .first { width:100px; height:100px; background-color:blue; float:left; } .second { width:100px; height:100px; background-color:yellow; float:right; } </style> </head> <div class=&quot;first&quot;></div> <div class=&quot;second&quot;></div> More content.<br /> More content.<br /> More content.<br /> More content.<br /> More content.<br /> More content. More content. More content. More content. More content. 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.
  7. 7. Clearing the float: If we want to force the next element to start below the floated elements, we can clear the float. <head> <style type=&quot;text/css&quot;> .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> <div class=&quot;first&quot;></div> <div class=&quot;second&quot;></div> <div class=&quot;clearfloat&quot;></div> More content.<br /> . . . More content. More content. More content. More content. More content.

×