Understanding DIVs   Floats and the block model
Learning how DIVs react             <div></div>   border:	  1px	  solid	  #000000;
Learning how DIVs reactSome text in this box     <div>Some	  text	  in	  this	  box</div>          border:	  1px	  solid	 ...
Learning how DIVs reactSome text in this box     <div>Some	  text	  in	  this	  box</div>          border:	  1px	  solid	 ...
Learning how DIVs reactSome text in this box     <div>Some	  text	  in	  this	  box</div>          border:	  1px	  solid	 ...
Learning how DIVs react           Lorem ipsum dolor sit amet,           consectetur adipisicing elit, sed do           eiu...
Learning how DIVs react           Lorem ipsum dolor sit amet,           consectetur adipisicing elit, sed do           eiu...
Learning how DIVs react           Lorem ipsum dolor sit amet,           consectetur adipisicing elit, sed do           eiu...
Learning how DIVs react           Lorem ipsum dolor sit amet,           consectetur adipisicing elit, sed do           eiu...
Learning how DIVs react           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed           do eiusmod tempo...
Learning how DIVs react           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed           do eiusmod tempo...
Floats<div	  id="largebox">	   <div	  id="orangebox"></div></div>
Floats#orangebox{width:100px;	  height:100px;}#largebox{width:600px;	  height:	  400px;}
Floats<div	  id="largebox">	   <div	  id="orangebox"></div>	  	  <div	  id="purplebox"></div></div>
Floats#orangebox{float:left;}#purplebox{float:left;}
Floats#orangebox{float:left;}#purplebox{float:left;}
Floats#orangebox{float:left;}#purplebox{float:left;}
Floats#orangebox{float:left;}#purplebox{float:right;}
Floats#orangebox{float:left;}#purplebox{}
Floats#orangebox{float:left;}    <div	  id="largebox">                           	           <div	  id="orangebox"></div> ...
Floats#orangebox{float:right;}   <div	  id="largebox">                           	           <div	  id="orangebox"></div> ...
FloatsLorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaa...
Floats            Lorem ipsum dolor sit amet, consectetur            adipisicing elit, sed do eiusmod tempor            in...
Clear       <div	  id="largebox">       	   <div	  id="smallbox"></div>       </div>#orangebox{width:150px;	  height:150px;}
Clear       <div	  id="largebox">       	   <div	  id="smallbox"></div>       	   <div	  id="clear"></div>       </div>#or...
Clear<div	  id="largebox"	  class="clearfix">	   <div	  id="smallbox"></div></div>   	     	     .clearfix:after	  {   	  ...
Inline vs block<p>Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod tempor incididunt utlabore et do...
Inline vs block<p>Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod tempor incididunt utlabore et do...
Inline vs block<p>Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore etdo...
Upcoming SlideShare
Loading in …5
×

Understanding DIVs

2,811 views

Published on

Basic information about how DIVs react to certain conditions in HTML. This presentation is used as a part of a web design course at the UC Berkeley journalism school.

Published in: Education

Understanding DIVs

  1. 1. Understanding DIVs Floats and the block model
  2. 2. Learning how DIVs react <div></div> border:  1px  solid  #000000;
  3. 3. Learning how DIVs reactSome text in this box <div>Some  text  in  this  box</div> border:  1px  solid  #000000;
  4. 4. Learning how DIVs reactSome text in this box <div>Some  text  in  this  box</div> border:  1px  solid  #000000; height:  100px;
  5. 5. Learning how DIVs reactSome text in this box <div>Some  text  in  this  box</div> border:  1px  solid  #000000; height:  100px; width:  200px;
  6. 6. Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; height:  100px; width:  200px;
  7. 7. Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; height:  100px; width:  200px;
  8. 8. Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; height:  100px; width:  200px; overflow:  hidden;
  9. 9. Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; height:  100px; width:  200px; overflow:  scroll;
  10. 10. Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; width:300px;
  11. 11. Learning how DIVs react Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<div>Lorem  ipsum  dolor  sit  amet,  consectetur  adipisicing  elit,  sed  do  eiusmod  tempor  incididunt  ut  labore  et  dolore  magna  aliqua.</div> border:  1px  solid  #000000; width:300px; padding:  10px;
  12. 12. Floats<div  id="largebox">   <div  id="orangebox"></div></div>
  13. 13. Floats#orangebox{width:100px;  height:100px;}#largebox{width:600px;  height:  400px;}
  14. 14. Floats<div  id="largebox">   <div  id="orangebox"></div>    <div  id="purplebox"></div></div>
  15. 15. Floats#orangebox{float:left;}#purplebox{float:left;}
  16. 16. Floats#orangebox{float:left;}#purplebox{float:left;}
  17. 17. Floats#orangebox{float:left;}#purplebox{float:left;}
  18. 18. Floats#orangebox{float:left;}#purplebox{float:right;}
  19. 19. Floats#orangebox{float:left;}#purplebox{}
  20. 20. Floats#orangebox{float:left;} <div  id="largebox">   <div  id="orangebox"></div>    <div  id="purplebox"></div> </div>#purplebox{float:right;}
  21. 21. Floats#orangebox{float:right;} <div  id="largebox">   <div  id="orangebox"></div>    <div  id="purplebox"></div> </div>#purplebox{float:left;}
  22. 22. FloatsLorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteursint occaecat cupidatat non proident, sunt in culpa qui.
  23. 23. Floats Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duisvelit esse cillum dolore eu fugiat nulla pariatur. Excepteursint occaecat cupidatat non proident, sunt in culpa qui.Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.#orangebox{float:left;}
  24. 24. Clear <div  id="largebox">   <div  id="smallbox"></div> </div>#orangebox{width:150px;  height:150px;}
  25. 25. Clear <div  id="largebox">   <div  id="smallbox"></div>   <div  id="clear"></div> </div>#orangebox{width:150px;  height:150px;}#clear  {clear:both;}
  26. 26. Clear<div  id="largebox"  class="clearfix">   <div  id="smallbox"></div></div>     .clearfix:after  {            content:  ".";            display:  block;            height:  0;            clear:  both;            visibility:  hidden;     }
  27. 27. Inline vs block<p>Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa qui officiadeserunt mollit anim id est laborum.</p>
  28. 28. Inline vs block<p>Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa qui officiadeserunt mollit anim id est laborum.</p>
  29. 29. Inline vs block<p>Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat. <span class=“red”>Duis auteirure dolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur.</span> Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officiadeserunt mollit anim id est laborum.</p>

×