Style Figures and Images with Float and Clear CSS Properties

[intro music] hey this is ralph and in this video i would like to style and float this image and I have this is on a web page created in an earlier video we’re practicing some hyperlinks and I’ve got a photo of here or the harbor Homer Alaska along with some text and this is actually contained within a figure and fig caption so you can see on the HTML and using the figure element to contain an image and that image is followed by a fig caption what I would like to do is get this image off over here in the upper right corner of the page and the text will remain over here on the left to help illustrate what’s going on i’m gonna head up to my styles and one of the first things i do is create a new rule for figure but i’m going to put a border on this and I like putting borders on things certainly in the working phase even if you don’t want to border because it helps you visualize what’s going on and we can see in its natural state this figure is trying to take up as much with this possible there’s a bit of margin on the left and the right that’s causing these spaces over here so naturally this this figure is going to be as wide as necessary and you can you can obviously change the width of this especially if you wanted to create a little bit of a buffer on there or you could put padding there’s a number of different ways so you could use a pretty standard width and i know this image is 500 pixels wide so i could do something like 510 pixels wide for the figure and now it’s a little bit more narrow and this is another illustration too by the way our photo is by default left aligned to its container in this case the figure so if i want to Center everything the image including the text well images are treated like text so you can use a simple CSS property text align and i will choose center for this and just by putting in text align center there we go so now the image and the text is centered within it’s red frame now to get it over to the right i’m simply going to use float right and you’ve only got a couple choices with float really it’s a left, right, or none i want to float it to the right and that of course will take my image and move it all the way over to the right side and then there’s just a couple more fixes I’d like to make I’d like this image to be actually near the top that’s going to require a change in the HTML you notice i have my text links over here on the left and then below that but to the right I’ve got my figure well i would like to figure to be up a little higher and since it’s floating to the right i can just take my figure HTML and drag it up to the top here so my figure precedes my text links ctrl s to save head back to the browser and refresh and now we can see my figure is higher up on the page if you don’t like the space over here that’s being created a couple ways to solve that one of the ways i like to do is put in a a CSS reset rule but i’m not going to cover that in this video so instead I’ll just go to my styles and I’ll take the margin which is currently on the right and set it to 0 pixels so if i get rid of that default margin now my figure we’ll stay over there the right and then it’s up to you to decide if you want the border or not if you no longer like the border simply delete it from your CSS rule and there we go so you now have your photo and fig caption off to the right side of the page and the text is along the left now I’d like to throw one more thing at you what if i had two figures two photos let me show you this in the code i’m just going to run down here and i’m going to duplicate this figure so i’ll have two identical figures and check out what’s happening here both of them are floating to the right so my first one which is over here on the right is floating to the right and when you float something to the right content that follows slides up along the left side so my second figure is floating along side of the first figure well if I want them to be one on top of the other one of the easiest way so you do that is to cancel out a float or even better force an element that is wrapping around floating object to clear the floating object ok so I’m going to use a clear property for this and what that really means is i’m gonna head up to my figure rule and i’m going to put in the property clear and there’s a couple options with this to you can clear left you can clear right or you can clear both in this example clearing both are clearing right would give me the same result I’m going to clear right which basically means the figure is going to float to the right but any figure that is wrapping around the floating object will clear that floating object clear: right means it will simply clear any right floating objects I know that’s weird to think about but I save this and refresh my browser these two images will now be one on top of the each other they’re both floating to the right but they’re also clearing a previously floating object this actually comes in handy more often than you might think it’s going to be pretty regular that you’re floating photographs or figures to the left or to the right and where this really comes into play is with headlines it usually doesn’t look good to have a headline maybe which starts up a new section wrapping around floating object so doing a clear both on headline styles is pretty common

Tags:, ,

Add a Comment

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