Floats

1,376 views
1,174 views

Published on

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,376
On SlideShare
0
From Embeds
0
Number of Embeds
438
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Floats

  1. 1. Floats in CSS The most difficult and frustrating part of web designFriday, February 17, 2012
  2. 2. How boxes work in CSS • By default a box will have a width of 100%, or the full width of its container. • By default a box will have a height that conforms to the content of that box. • If you set a height in CSS, that overrides the content. • By default a box will stack from the top down.Friday, February 17, 2012
  3. 3. The defaults for a box CSS div  { } HTML <div></div>Friday, February 17, 2012
  4. 4. The defaults for a box CSS div  { border:1px  solid  #000; } HTML <div></div>Friday, February 17, 2012
  5. 5. How boxes work in CSS • By default a box will have a width of 100%, or the full width of its container. • By default a box will have a height that conforms to the content of that box. • If you set a height in CSS, that overrides the content. • By default a box will stack from the top down.Friday, February 17, 2012
  6. 6. The defaults for a box CSS div  { border:1px  solid  #000; } HTML <div></div>Friday, February 17, 2012
  7. 7. The defaults for a box CSS div  { border:1px  solid  #000; hello world } HTML <div>hello  world</div>Friday, February 17, 2012
  8. 8. How boxes work in CSS • By default a box will have a width of 100%, or the full width of its container. • By default a box will have a height that conforms to the content of that box. • If you set a height in CSS, that overrides the content. • By default a box will stack from the top down.Friday, February 17, 2012
  9. 9. The defaults for a box CSS div  { border:1px  solid  #000; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore } HTML <div>Lorem  ipsum  dolor  sit  amet,   consectetur  adipisicing  elit,  sed   do  eiusmod  tempor  incididunt  ut   labore</div>Friday, February 17, 2012
  10. 10. The defaults for a box CSS div  { border:1px  solid  #000; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore height:  10px; } HTML <div>Lorem  ipsum  dolor  sit  amet,   consectetur  adipisicing  elit,  sed   do  eiusmod  tempor  incididunt  ut   labore</div>Friday, February 17, 2012
  11. 11. How boxes work in CSS • By default a box will have a width of 100%, or the full width of its container. • By default a box will have a height that conforms to the content of that box. • If you set a height in CSS, that overrides the content. • By default a box will stack from the top down.Friday, February 17, 2012
  12. 12. The defaults for a box CSS div  { border:1px  solid  #000; hello world } HTML <div>hello  world</div>Friday, February 17, 2012
  13. 13. The defaults for a box CSS div  { border:1px  solid  #000; hello world Another box } HTML <div>hello  world</div> <div>Another  box</div>Friday, February 17, 2012
  14. 14. How boxes work in CSS • By default a box will have a width of 100%, or the full width of its container. • By default a box will have a height that conforms to the content of that box. • If you set a height in CSS, that overrides the content. • By default a box will stack from the top down.Friday, February 17, 2012
  15. 15. FloatsFriday, February 17, 2012
  16. 16. Stacking • By default boxes will stack from the top down, regardless of width.Friday, February 17, 2012
  17. 17. Default: stack from the top <div  id=“beige”></div> <div  id=“brown”></div> <div  id=“orange”></div>Friday, February 17, 2012
  18. 18. Stacking from the left float:left; float:left; float:left; <div  id=“beige”></div> <div  id=“brown”></div> <div  id=“orange”></div>Friday, February 17, 2012
  19. 19. Stacking from both sides float:left; float:left; float:right; <div  id=“beige”></div> <div  id=“brown”></div> <div  id=“orange”></div>Friday, February 17, 2012
  20. 20. Two boxes floating right float:left; float:right; float:right; <div  id=“beige”></div> <div  id=“brown”></div> <div  id=“orange”></div>Friday, February 17, 2012
  21. 21. All boxes floating right float:right; float:right; float:right; <div  id=“beige”></div> <div  id=“brown”></div> <div  id=“orange”></div>Friday, February 17, 2012
  22. 22. Float left CSS img  { } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et HTML dolore magna aliqua. <p><img  src=“tree.jpg”>Lorem  ipsum   dolor  sit  amet,  consectetur   adipisicing  elit,  sed  do  eiusmod   tempor  incididunt  ut  labore  et   dolore  magna  aliqua.</p>Friday, February 17, 2012
  23. 23. Float left CSS img  { Lorem ipsum dolor sit amet, consectetur float:  left; adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. } HTML <p><img  src=“tree.jpg”>Lorem  ipsum   dolor  sit  amet,  consectetur   adipisicing  elit,  sed  do  eiusmod   tempor  incididunt  ut  labore  et   dolore  magna  aliqua.</p>Friday, February 17, 2012
  24. 24. The problem with floatsFriday, February 17, 2012
  25. 25. Problem with floats [F]loating elements can overlap with the margin, border and padding areas of other elements … when the floating element is wider or higher than the element it is inside. <div  id=“container”> </div>Friday, February 17, 2012
  26. 26. Problem with floats [F]loating elements can overlap with the margin, border and padding areas of other elements … when the floating element is wider or higher than the element it is inside. <div  id=“container”> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>Lorem  ipsum  dolor  sit  amet,   consectetur  adipisicing  elit,   sed  do  eiusmod  tempor  incididunt   ut  labore  et  dolore  magna   aliqua.</p> </div>Friday, February 17, 2012
  27. 27. Problem with floats [F]loating elements can overlap with the margin, border and padding areas of other elements … when the floating element is wider or higher than the element it is inside. <div  id=“container”> <img  src=“tree.jpg”> <p>Lorem  ipsum  dolor  sit  amet,   consectetur  adipisicing  elit,   sed  do  eiusmod  tempor  incididunt   ut  labore  et  dolore  magna   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do aliqua.</p> eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>Friday, February 17, 2012
  28. 28. Problem with floats [F]loating elements can overlap with the margin, border and padding areas of other elements … when the floating element is wider or higher than the element it is inside. <div  id=“container”> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <img  src=“tree.jpg”  style=“float:left”> incididunt ut labore et dolore magna aliqua. <p>Lorem  ipsum  dolor  sit  amet,   consectetur  adipisicing  elit,   sed  do  eiusmod  tempor  incididunt   ut  labore  et  dolore  magna   aliqua.</p> </div>Friday, February 17, 2012
  29. 29. Let’s say I have a containerFriday, February 17, 2012
  30. 30. Add a boxFriday, February 17, 2012
  31. 31. Apply a float:left to the boxFriday, February 17, 2012
  32. 32. When an item is floated: • its parent element no longer respects it as content. • an item that is floated will overlap its container’s borders.Friday, February 17, 2012
  33. 33. CSS ClearFriday, February 17, 2012
  34. 34. Clear means “no floating elements allowed” p  { Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. clear:left; Ut enim ad minim veniam } Possible values for “clear” clear:none; clear:left; clear:right; clear:both;Friday, February 17, 2012
  35. 35. Using a clear to fix float issue 1. Create an empty <div> 2. Apply clear:both; to the <div>Friday, February 17, 2012
  36. 36. Common issue with layout What youʼre hoping to build What you probably end up withFriday, February 17, 2012
  37. 37. The Fix What youʼre hoping to build .clear{ clear:both; } <div  class=“clear”></div> Putting an empty <div> at the bottom of your document.Friday, February 17, 2012

×