I have created a page in my website where I have to display all the categories with its corresponding sub categories with their images.
Suppose I have 10 Main categories and under main categories there are sub categories for each main category. And in each main category there are 5-20 sub categories.
The problem is that I have three columns and when I display first main category with its 20 sub categories and then second main category with 5 sub categories in my first column and then my second column starts and when I display third main category with only 3 sub categories then my third main category (which has only 3 sub categories) leaves the 17 rows space because in first column the first main category took 20 rows so it leaves 17 rows blank and starts my fourth category after black 17 rows. As you could see below :
(Food Main Category Heading)
I column II Column III column
Food subcategories Breakfast
Cold Cereals and sub-sub categories list
1ST Stage Baby Food Dips and Spreads
2ND Stage Baby Food
3RD Stage Baby Food
Breakfast Frozen Foods
Cold Cereals and sub-sub categories list starts
Candy Dairy & Dairy Substitutes
Boxed Candy and sub-sub categories list
Candy Bar starts
Dairy & Dairy Substitutes
I just want to start my fourth category exactly from the next row appearing in my second column after third category without leaving any row as blank. I am using data list and grid view controls.
Any Help is appreciated. Thanks in advance.