CSS Tutorial for Beginners - 33 - Floating an element Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the thirty third video on
beginning CSS today we're going to look
at how to float an element and what
we're going to do is we're going to
float this div one block element right
here and this div two block element but
before we do that let's talk about the
flow again and remember I touched upon
that subject a few videos ago and
remember if we don't put any widths in
our elements the browser will paint
those automatically from left to right
and that's called the float it's a very
natural thing so the first one gets
painted right here then there's a line
break and then the second element gets
painted and then as we see there's some
paragraph elements within this block
element everything is a nice and natural
flow now we're going to interrupt that
and float these two elements so
essentially what we're doing is we're
overriding the browser if you want to
think of it like that and we're telling
the browser where we want to place the
element now let's go ahead and float the
first element now in order to float an
element the first rule is that you need
to give the element a width if you don't
give it a width well then the browser is
just going to go ahead and expand that
out itself the browser does all the work
so let's do that in the first div here
and we'll put in a width of let's make
it 300 pixels and then we're going to
use the float property of course and we
will float this left and so let's go
ahead and save this and let's refresh
this and you can see now this is pinned
to the left and that's the nice thing
about floating an element you can pin it
to the left now this other element here
is getting rendered because it's next on
the list and it's going to fill up this
space and this is being done by the
browser we haven't actually put in a
width or float here so the browser is
actually doing this for us
and so now let's go ahead and pin div
two to the right and so we'll just copy
and paste this and we'll give it the
same pixel count only we're going to go
ahead and float this to the right and
we'll save this and there you see now
I'll explain why this element here just
took up the center space and this will
actually correspond to how the flow
works with floated elements so now you
can see we've got the div two to the
right and the div one to the left now
one thing this allows you to do
is put block elements side by side
remember that won't happen if we let the
browser paint it for us in other words
if we use the flow so that's one thing
floating allows you to do it allows you
to put block elements side by side and
it also allows you to always keep an
element pinned to the left side and an
element always pin to the right side it
will always be there no matter what so
if we you know if we resize this you can
see it always stays pinned to the left
now the first question you might be
asking is well why did the browser put
this header block element which we
didn't float by the way this is still in
the flow if we want to call it that and
you might be asking what why is this
here and the answer to that is think of
it this way when you float an element
you are interrupting the flow and so
think of it almost like the browser
doesn't even really know about it it's
almost like he's going to paint this
header element and then this space right
here is between this header one element
and this header to these two the div 1
and the div 2 are outside the flow now
so he only really knows about the header
two so he's naturally going to go ahead
and paint this between these two
elements now sometimes you may want that
effect and we will get into that when we
do the CSS layout series and actually in
this video I don't want you to worry
about coding we're going to be floating
elements when we get to the CSS layout
series I just wanted you to understand
how to code it and the concept now one
way to get this back down here is to put
a percentage in here and let's put in
50% and I will show you what happens and
then let's just go ahead and put this in
the other div as well and let's save
this
let's hit refresh and there you can see
now what this did was we said hey take
up 50% of the page in terms of width and
we did that for the div 2 element as
well and so this element now is pushed
down here but you'll notice there's no
line break here because once again these
two elements are outside the flow so the
browser won't put in that line break the
line break he only really knows about
the header one element so he puts a line
break here there is no div 1 and div 2
element we are in control of those
elements with the flow now a couple more
points before we close this video you
will
also notice that the paragraph elements
inside the floated elements also sized
appropriately in other words they size
appropriately to the size of the now
floated element so just remember that
when you float an element it's no longer
part of the flow okay that's going to do
it for this video I will see you guys in
the next video