Unlike all the different types of positioning you just learned float is easy but can still be effective. It is recommended in many situations because it is flexible. The simplest example is where you float text around an image. Create a new page called float.html. Paste this in:
<div style="width:323px;height:256px;"> <img src="./media/whatsinside.png" alt="If no image appears here check that you have the image in your media folder" /> </div> <p>Some text which is here just because we need some text to wrap around the div which should happen once the styles are there but if it doesn't just add some more text until it is longer than the DIV is high.</p>
You've done that before but save it and try it to remind you. Then amend the styles for the div to look like this:
Try it. Then copy the whole p element including the text and paste it under itself 10 or 20 times until the text no longer wraps alongside the image but goes under it:
This image is floated to the left and illustrates an image floated left. I'm not sure that was necessary!
If you do not want to carry on wrapping you use clear. Find your third paragraph and change the opening p tag so that it looks like this:
You should find that the first two paragraphs wrap but the third one moves to clear the image completely.
One of the main uses other than wrapping text around an object is to flexibly arrange div elements within other elements. For example if you wanted a row of links as a menu on a page you can create one as follows.
- add a nav element just above the existing h1 element
- in the embedded style sheet set the width of the nav to 600px, height to 30px, give it a background colour and set margin-left and margin-right to auto
- in the HTML add three new div elements (so you have one nav element with three div elements inside it under one another)
- give all three div elements a class menulink
- in the embedded style sheet set the width of the class menulink to 250px, height 30px and give add a different background colour to the nav
- put links into the three div elements (they do not need to work but they do need to appear)
You should see something like this:
Now add this line to the .menulink styles:
This should make the second div "float" up alongside the first one.
The third div does not float up because it will not fit. Unfortunately that also means that the nav element is not high enough so everything looks messy. If you want a second row of div links you need to increase the height of the nav element so that the rest of the page is kept clear of the links. However, our links will probably fit fine if they were not so wide so change the width of all .menulink elements to 200px. What happens then will depend on your browser defaults. Remember that all elements may have a margin, border and padding and they add to the space taken up by the element. If you have a margin, border or padding around the .menulink div elements then they will still not fit in one row. You can either make them narrower or set margin, padding and border to zero width. When done you should not see the background colour of the nav element at all:
Add a fourth link. Increase nav height to allow the second row of links. Add more links (copy and paste) to make eight and reduce the size of the div elements until all eight fit on two rows. Play generally!