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.

1. Understanding DIVs
Floats and the block model

2. Learning how DIVs react
<div></div>
border:
1px
solid
#000000;

3. Learning how DIVs react
Some text in this box
<div>Some
text
in
this
box</div>
border:
1px
solid
#000000;

4. Learning how DIVs react
Some text in this box
<div>Some
text
in
this
box</div>
border:
1px
solid
#000000;
height:
100px;

5. Learning how DIVs react
Some text in this box
<div>Some
text
in
this
box</div>
border:
1px
solid
#000000;
height:
100px;
width:
200px;

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. 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. 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. 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. 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. 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. Floats
<div
id="largebox">
<div
id="orangebox"></div>
</div>

13. Floats
#orangebox{width:100px;
height:100px;}
#largebox{width:600px;
height:
400px;}

14. Floats
<div
id="largebox">
<div
id="orangebox"></div>
<div
id="purplebox"></div>
</div>

15. Floats
#orangebox{float:left;}
#purplebox{float:left;}

16. Floats
#orangebox{float:left;}
#purplebox{float:left;}

17. Floats
#orangebox{float:left;}
#purplebox{float:left;}

18. Floats
#orangebox{float:left;}
#purplebox{float:right;}

19. Floats
#orangebox{float:left;}
#purplebox{}

20. Floats
#orangebox{float:left;} <div
id="largebox">
<div
id="orangebox"></div>
<div
id="purplebox"></div>
</div>
#purplebox{float:right;}

21. Floats
#orangebox{float:right;} <div
id="largebox">
<div
id="orangebox"></div>
<div
id="purplebox"></div>
</div>
#purplebox{float:left;}

22. Floats
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui.

23. Floats
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Duis
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui.
Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
#orangebox{float:left;}

24. Clear
<div
id="largebox">
<div
id="smallbox"></div>
</div>
#orangebox{width:150px;
height:150px;}

25. Clear
<div
id="largebox">
<div
id="smallbox"></div>
<div
id="clear"></div>
</div>
#orangebox{width:150px;
height:150px;}
#clear
{clear:both;}

26. Clear
<div
id="largebox"
class="clearfix">
<div
id="smallbox"></div>
</div>
.clearfix:after
{
content:
".";
display:
block;
height:
0;
clear:
both;
visibility:
hidden;
}

27. Inline vs block
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

28. Inline vs block
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

29. Inline vs block
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. <span class=“red”>Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.</span> Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>