Understanding DIVs

Understanding DIVs
Floats and the block model

Learning how DIVs react

<div></div>
border:
1px
solid
#000000;

Some text in this box

<div>Some
text
in
this
box</div>
border:
1px
solid
#000000;


<div>Some
text
in
this
box</div>
border:
1px
solid
#000000;
height:
100px;


<div>Some
text
in
this
box</div>
border:
1px
solid
#000000;
height:
100px;
width:
200px;

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;


<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;


<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;

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;

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;

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

<div
id="purplebox"></div>
</div>

Floats

#orangebox{float:left;}

#purplebox{float:left;}

Floats


#purplebox{float:right;}

Floats


#purplebox{}

Floats

#orangebox{float:left;} <div
id="largebox">

<div

<div
</div>
#purplebox{float:right;}

Floats

#orangebox{float:right;} <div
id="largebox">

<div

<div
</div>
#purplebox{float:left;}

Floats

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.

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 ofﬁcia deserunt mollit anim id est laborum.


Clear

<div
id="largebox">

<div
id="smallbox"></div>
</div>

height:150px;}

Clear

<div
id="largebox">

<div

<div
id="clear"></div>
</div>

height:150px;}
#clear
{clear:both;}

Clear

<div
id="largebox"
class="clearfix">

<div
</div>

.clearfix:after
{

content:
".";

display:
block;

height:
0;

clear:
both;

visibility:
hidden;

}

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 ofﬁcia
deserunt mollit anim id est laborum.</p>

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 ofﬁcia
deserunt mollit anim id est laborum.</p>

Understanding DIVs

More Related Content

Recently uploaded (7)

Featured (20)

Understanding DIVs