Simulating rowspan with css and divs?

Question

Hi I am trying to simulate the rowspan property on css using divs and tags, so it can be changed on a:active = double height, but at the moment it grows from two rows to three rows.

It only works when the first column its expanded, if I expand the second, third, etc then it would grow to three rows.

Here its the sample code that works, and it remains in two rows.

<div style="float:left;width:750px;text-align:center;height:30px;">

   <a href="#" style="float:left;width:149px;height:30px;">1</a>
   <a href="#" style="float:left;width:149px">2</a>
   <a href="#" style="float:left;width:149px">3</a>
   <a href="#" style="float:left;width:149px">4</a>
   <a href="#" style="float:left;width:149px;">5</a>

   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
</div>

But If I do the following :

<div sytle="width:750px;text-align:center;height:30px;float:left">
<!--Row 1---->
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px;height:30px;">2</a>
   <a href="#" style="float:left;width:149px">3</a>
   <a href="#" style="float:left;width:149px">4</a>
   <a href="#" style="float:left;width:149px;">5</a>
<!--Row 2---->
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
 </div>

Then it would grow to three rows.

What I am trying to do its a two row tabs, so when you select the one at the top it would expand the row to indicate that its been selected.

Because there are 5 elements at the top and 4 in the bottom, when you select the one at the top its when it needs to expand taking the space of the missing element below.

Can anybody help me, please.

Thanks.

Answer 1

Using javascript (and jQuery) will let you use the easier to understand -- and semantically appropriate -- rowspan and colspan attributes of table cells.

jQuery is very easy to learn! And you'll find lots of help here on Stackoverflow :)

Answer 2

Hi all,

I am trying to get the solution MDCore suggested, but if any of you could get me a solution for this using only css and the example provided it would be great.

Thanks.