27 - How to clear the div float

Video Description

How to add a box below float.

If you add another div below a box that has float it will disappear underneath it. To fix this issue you will need to add the 'clear' function to the new box. This will ensure that it sits nicely below.

1. Insert > Div
2. Choose ‘After tag’ &
3. Name it ID: footer
   
4. Ok
5. Make sure you have the vintage.css selected from the source panel. Click the + button in the 'Selector' panel.
6. Name your selector #footer
7. Make the width 800px and the height 100px.
8. Choose a red for the background colour.
   
   
   Note: At this point the #footer div tries to push underneath the floated divs and the text squirts out the side. This is normal at this stage and we'll fix this next. 
    
9. In the Properties panel choose 'clear > both'. 
   
   
   

Note: The footer should be visible and working properly. 

Note: Make sure you remove the height from any DIV tags you want to expand. This will allow the DIV tags like ‘text’ to expand & contract depending on how much content (or text) you have.