How to arrange those squares like this

Hi, I am currently making a website by using what I’ve learned from this lecture.
And this is how my index page would look like.

Each square links to different sub pages, and I want to arrange them like the picture above.
I tried to use table tags and put those squares as background images
but I can’t figure out how to make a table like this.
Please help me with the code.

You could almost pay someone to make such a design. Here is how i would approach it.

wrap 1,2,3,4 in a div. float this div left. Inside the div, wrap 1 and 3 in a div, float them both left, or 1 left and 3 right.

wrap 2 and 4 in a div, and float them both left or 2 left and 4 right.

wrap 5,6,7 in a div, and float it left.

wrap 8,9,10 in a div, float them left or right. If you give 8 sufficient width, 9 and 10 should be below 8. wrap 9 and 10 in a div and float both left, or 9 left and 10 right.

I am not going to code this for you, this means i would be coding, which is a paid job


oh thanks i’ll try that :slight_smile:

1 Like