<div> css instead of <table>

Please see the attached image to follow these four items:

- There are total of 8 sections only. Box 5 doesn't include 3 subsections.
- The vertical dash lines are to help to see box 5 x 2/3 = box 6
- Box 6 is smaller than box 5 in the proportion shown.
- Center-line of box 2 and the center-line of box 6 must match.

In the image, I have included user-friendly names for each section. I appreciate if you could use them as well adding any required format names you need. This will be help me to follow your code better.

Could you please put together, a html/ css code to accomplish this?

Thank you.

Also, when I tried, I see there is a major problem with the code as shown on the attached image. How can I correct this?

section 2 (gap) is one &nbsp while section 6 (middleButton) is much wider.

section
1  40%
2 &nbsp
3 40%
4 15%
5 30%
6 ~20%
7 30%
8 15%
table.png