Floats Now we move onto floats which is used to allow us to have multiple tags next to each other because when we use HTML tags such as divs they always are made on a new line like this text more text <div>text</div> <div>more text</div> See how the second div is pushed down to the bottom instead of being next to it. Now this is where we add a float to the first div and you will notice a change text more text <div style="float: left;">text</div> <div>more text</div> Clearing Floats Now we come to the one main problem with floats and that is clearing floats. Now this problem is when we use a float and then add new divs the becuase the float wasnt cleared it wont look right for example the background wont show. See the demo, the first example is what looks like when you dont close floats and the seccond is what it looks like when you do. So to fix this problem all you have to do is to add this peice of code the clear the float <div style="clear:both;"></div> So here I have put the clear code in between the two bozes <div
class="box1">Some Content</div> and add the following CSS .box1 One important thing to remember about floats is you must always clear them and some browsers do it automatically such as internet explorer, this is bad they shouldn't do this and if you test your website in firefox it will appear like this. Background Image Now instead of having a div tag with a background colour we can set it as a background image, this is how the top part of this site is made using this technique so lets take a look at how this is done. <div id="image">Hello World!</div> and the CSS #image{ make sure not to forgot the file extension of the image and use the correct directory to get to the image. |
