CSS floating elements | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy

– I’m laying out a web page for Hopper, one of our avatars here on Khan Academy. It’s got an image, some cool links and a paragraph. I think that this picture
of Hopper would look better next to the paragraph so I’m going to cut and paste it down here. Hmmmm, okay that doesn’t look
as good as I hoped it would. The text starts at the
bottom of the image. I was hoping that the text
would wrap around the image, like in newspapers and magazines. We’ll need a new CSS
property for that: float. It’s a way of floating
elements in and around other elements and it’s perfect for wrapping text around images. So we go up to our pick
rule and say float, and then for the value we
need to decide if we want the picture to float to the left hand side or the right hand side. Let’s try left. Great! Perfect! Well, okay. Not quite perfect because the text is really close to the image. Do you remember what property
we should use to separate the text from the image? It’s part of the box model
which we just learned. Margin. Let’s add some margin-right
and margin-bottom to this image to give it a little breathing room. See, margin-bottom: 6px; (sighs) Okay, that’s much better. We can also float elements
that aren’t images. Like if we want something like a sidebar. What about this list of links? We could take this list of
links and float it to the right. So let’s add a rule for Hopper’s links, float it to the right. Okay, it’s floating but it’s
taking up a lot of width. More than I was hoping it would take up. Let’s restrict the width to 30% so it will always take up 30% of the page and the rest of the page will
fill in the remaining 70%. Generally, whenever we float a div, we have to give it a
width because otherwise divs try to take up all the space and nothing can wrap around them. It seems like it also
needs a little bit of a margin-left too. Ah, okay. Notice the footer at the bottom with the contact info for Hopper. It’s doing this weird thing where it’s overlapping with the sidebar and that’s because it’s wrapping. We don’t want our footer to wrap though. We want it to always be on
the bottom of everything because it’s a footer. To make it not wrap, we
can use the clear property and put clear:both; Ha! We could use clear: left or clear: right if we only wanted to not wrap around right floating elements
or left floating elements, but usually we wanna not wrap
around any footing elements so we say clear: both. This is starting to look
like a real web page. We have a main area, a sidebar, a footer. In fact, you now know the CSS properties that make most web page layouts happen. Put together some divs with width, height, margin, padding, float and clear and there are all sorts
of web page layouts at your fingertips.

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *