How to make a div in the middle of two others to span multiple rows, like rowspan in tables

Question

It's been a while I try to keep away from using tables for laying out elements, as I realized that they were not meant for that and that normal container elements like div,p along with CSS are enough to achieve any layout one can need. I've been successful so far but there's one situation that I don't seem to overcome on my own. What I basically need is something that a table with the following markup would do:

<table>
  <tr>
    <td>Michael</td>
    <td rowspan="4"><img src="Photo.png"/></td>
    <td>Svenson</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Manson</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Sandgal</td>
  </tr>
  <tr>
    <td>Mirko</td>
    <td>Lahovic</td>
  </tr>
</table>

But I don't want to use table. This image will give you better idea of what I need: The layout

I've tried using float left and giving the middle div the total height of the four adjacent divs, but this time the second line of divs begin from the bottom line of the middle div.

Are you already aware about CSS frameworks like bootstrap, foundation, pure etc... and trying to learn how it works under the hoods? Because it is very straightforward with the grids framework that all of the CSS frameworks out there has, and their "getting started" guide takes you through a situation like what you have described. — Navneeth G, Sep 26 '14 at 06:20
On top of that, there is NO "row spanning" concept when you work with divs. That is a `table` only thing. You basically play with the `height` css property. — Navneeth G, Sep 26 '14 at 06:26

sanjeev · Accepted Answer · 2014-09-26T06:29:08.960

To demonstrate the changes , i have used border-color on the div, the code is pretty simple and clear.

In the example below the height has been fixed to 400px

<html>
     <head>
      <style type="text/css">
        *, *:before, *:after {
            box-sizing: border-box;
        }
        .row{
         width  : 100%;
         border : 1px solid #ff0000;
         padding: 5px;
         float:left;
        }
        .cont{
         height :400px;
         border : 1px solid #00ff00;
         width:33%;
         padding:10px;
         float:left;
        }
        .small-row{
          height:25%;
          border: 1px solid #0000ff;
          width:100%;
          padding:2px;
          float:left;
        }

      </style>
     </head>
     <body>
       <div class="row">
         <div class="cont">
            <div class="small-row"></div>
            <div class="small-row"></div>
            <div class="small-row"></div>
            <div class="small-row"></div>
         </div>

         <div class="cont">
            <div class="large-row"></div>
         </div>

         <div class="cont">
            <div class="small-row"></div>
            <div class="small-row"></div>
            <div class="small-row"></div>
            <div class="small-row"></div>
         </div>
       </div>
     </body>
    </html>

score 1 · Answer 2 · answered Sep 26 '14 at 06:21

I'd t ry using display:inline-block on the outer divs like so:

<div style='display:inline-block;height:100px;'>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
</div>

<div style='display:inline-block;height:100px;'>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;height:100px;"></div>
</div>

<div style='display:inline-block;height:100px;'>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
    <div style="width:200px;background-color:blue;height:20px;margin: 5px 0;"></div>
</div>

No floats required :)

How to make a div in the middle of two others to span multiple rows, like rowspan in tables

2 Answers2

Linked