27 - How to clear the div float


Questions & Comments

No comments

ALL ACCESS: $12 per Month + Cancel anytime   

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
    insert div 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.
    Insert a footer Div

    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'. 
    clear float property

    clear float working

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. 

ALL ACCESS: $12 per Month + Cancel anytime