CSS Tutorial for Beginners - 39 - Text and images Video Lecture - Learn

in this CSS video we're going to talk
about images and text right next to each
other I guess that's the best way to put
it now there are many times you want to
wrap text around images and so that's
what we're going to discuss again in
this video now as we talked about in
previous videos divs are a section of
your webpage and they kind of have a
life of their own you can stick whatever
you want in there you can stick images
text video anything you want to put in
there they have a life of their own so
we've got our div and what we're going
to do is place an image this image of
Julius Caesar now if you want this image
you can actually get this out on
Wikipedia for the article on Julius
Caesar and you will find that image it
is in the public domain by the way if an
image is in the public domain that means
you can use it for any use and you do
not have to provide any credit but again
Wikipedia is nice enough to tag these
images public domain and that means
again you can use it for any purpose you
want so I created one div and you can
see that it closes down here and then
I've got one paragraph where I put an
image in the paragraph and some text and
we want a bunch of text to see how this
works and so what we want is this image
to be aligned with the text now right
now it's not because we're not styling
this image we haven't added any CSS
rules yet so let's just see what the
default looks like and we'll load the
web page here and you can see the image
is placed right above the text but what
we want to do is actually align this
image with the text so everything aligns
nice and neat so let's do that now the
first thing we need to do is add a class
or an ID you'll remember that there are
two ways to do it use an ID or a class
in this case we're just going to use a
class not an ID and we're going to call
that class appropriately enough image
that's what we're going to name it and
so let's go ahead and save this oh there
was one more point one to make let's
reload this you will remember that this
is in the flow remember we talked about
the flow and past CSS videos well this
is in the flow and that is why this
comes first and then we get the text but
what we want to do is actually pull this
image out of the flow and you'll
remember the way we do that is
to float an image and that will actually
line everything up nice and neat and so
let's create a rule over in our
stylesheet and the first rule we're
going to create is float left so let's
save this and let's reload our webpage
and there you can see everything lines
up nice and neat but this text is very
close to the image and so there's a
couple ways you can deal with that and
that is to use the margin property of
the image to push this text away you can
push it as far as you want some people
want to push this all the way across the
page you can do that or you can push it
just a few pixels let's start out and
push it just a few pixels so let's go
back to our CSS code and let's actually
push this out 10 pixels instead of 30
and we'll save this and there you can
see now we have a little bit of space
between our image and our text now if
you wanted a bunch of space between the
text in the image you could push this
out 300 you know you could count the
pixels it would be like 300 400 pixels
and the text would be over here now the
next question you want to ask is do you
want text wrapping under this image if
you do you can keep the code as it is
but let's say you want all this text
lined up going down the page and the way
you can do that is actually push the
margin of this image down so let's push
it down 300 pixels and we'll see what we
get so again we're going to alter the
margin bottom property so let's save
this let's open this up and there you
can see the image kind of has its own
column and the text is aligned very nice
and neat in its own separate column now
these aren't really columns but it kind
of has the look of that and again we're
using margins to push all this text to
the right so that's how you deal with
images and text in the same div and in
the same paragraph oh and that's one
more point I wanted to point out you
want to make sure you put the image tag
inside the paragraph tag if you move
this outside of the paragraph tag it
will not be aligned in fact let me show
you that let's do that so we'll put this
outside of the paragraph tag and we'll
save this and you can see now that
they're not quite lined up and that's
because the text is all inside the
paragraph block and the image is no
longer inside the paragraph block and so
they're treated a little bit
currently and so let's go ahead and move
that back in there
we will save this reload it and now
everything is lined up nice and neat
okay that is going to do it for this
video see you guys in the next video