1. Floats in CSS
The most difficult and frustrating part of web design
Friday, February 17, 2012

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. The defaults for a box
CSS
div
{
}
HTML
<div></div>
Friday, February 17, 2012

4. The defaults for a box
CSS
div
{
border:1px
solid
#000;
}
HTML
<div></div>
Friday, February 17, 2012

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. The defaults for a box
CSS
div
{
border:1px
solid
#000;
}
HTML
<div></div>
Friday, February 17, 2012

7. The defaults for a box
CSS
div
{
border:1px
solid
#000; hello world
}
HTML
<div>hello
world</div>
Friday, February 17, 2012

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. 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. 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. 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. The defaults for a box
CSS
div
{
border:1px
solid
#000; hello world
}
HTML
<div>hello
world</div>
Friday, February 17, 2012

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. 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. Floats
Friday, February 17, 2012

16. Stacking
• By default boxes will stack from the top down, regardless of width.
Friday, February 17, 2012

17. Default: stack from the top
<div
id=“beige”></div>
<div
id=“brown”></div>
<div
id=“orange”></div>
Friday, February 17, 2012

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. 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. 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. 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. 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. 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. The problem with floats
Friday, February 17, 2012

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. 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. 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. 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. Let’s say I have a container
Friday, February 17, 2012

30. Add a box
Friday, February 17, 2012

31. Apply a float:left to the box
Friday, February 17, 2012

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. CSS Clear
Friday, February 17, 2012

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. Using a clear to fix float issue
1. Create an empty <div>
2. Apply clear:both; to the <div>
Friday, February 17, 2012

36. Common issue with layout
What youʼre hoping to build What you probably end up with
Friday, February 17, 2012

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