Image overlaying text.


Hello I am trying to create a 3×3 image box.
Text above and image underneath.
I have 3 boxes in each row. 2 rows but the image is overlaying the text and not moving the row down, why is that?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">  </head> <style> * {   box-sizing: border-box; }  /* Create three equal columns that floats next to each other */ .column {   float: left;   width: 33.33%;   padding: 10px;   height: 300px; /*...
Code (markup):

Image overlaying text.