OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can i expand a cell to occupy entire row in a grid structure using css?

  • Thread starter Thread starter utkarsh sinha
  • Start date Start date
U

utkarsh sinha

Guest
My page looks something like

Code:
|  A  |  C  |
|-----|     |
|  B  |     |
|-----|-----|

Problem statement is how can i expand div B to occupy the entire row Only if the height of div A is equal to that of div C?

Basically.. structure should be like below image ( only if height(A) == height(c) )

Code:
|  A  |  C  |
|-----|-----|
|     B     |
|-----------|

Problem with the 1st structure is that since the div C is made by combining 2 vertical cells as a result its height becomes dynamic ( dependent on A and B) ... As a result B never get the chance to expand on the entire row.

I also tried bringing C out from the grid structure so that its height becomes independent of A and B ... But that also didn't work as there will be only one column remaining so B doesn't have any place to expand .

can someone help me on how can we achieve the desired behaviour ?

<p>My page looks something like</p>
<pre><code>| A | C |
|-----| |
| B | |
|-----|-----|
</code></pre>
<p>Problem statement is how can i expand <code>div B</code> to occupy the entire row <strong>Only if the height of <code>div A</code> is equal to that of <code>div C</code></strong>?</p>
<p>Basically.. structure should be like below image ( <strong>only if height(A) == height(c)</strong> )</p>
<pre><code>| A | C |
|-----|-----|
| B |
|-----------|
</code></pre>
<p>Problem with the 1st structure is that since the <code>div C</code> is made by combining 2 vertical cells as a result its height becomes dynamic ( dependent on A and B) ... As a result <code>B</code> never get the chance to expand on the entire row.</p>
<p>I also tried bringing <code>C</code> out from the grid structure so that its height becomes independent of <code>A</code> and <code>B</code> ... But that also didn't work as there will be only one column remaining so <code>B</code> doesn't have any place to expand .</p>
<p>can someone help me on how can we achieve the desired behaviour ?</p>
 
Top