Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Floats
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
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
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
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
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
