Displaying divs like tables with rowspans

Question

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>

.div1 { 
    border: 1px solid red;
    float: left;
    width: 20px;
}
.div2 {
    border: 1px solid green;
    width: 100%;
}

Please look at my code at JS Fiddle

I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.

I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.

Thanks!

possible duplicate of [Colspan/Rowspan for elements whose display is set to table-cell](http://stackoverflow.com/questions/9277661/colspan-rowspan-for-elements-whose-display-is-set-to-table-cell) — the1dv, Feb 16 '15 at 02:50

Jason W · Accepted Answer · 2015-02-16T03:06:23.933

1

You can use the table/table-cell display css options.

UPDATED Fixed stretching issue.

<div style="display:table">
    <div style="display:table-cell;height:100%;" class="div1">
        1
    </div>
    <div style="display:table-cell;width:100%">
        <div class="div2">2</div>
        <div class="div2">3</div>
    </div>
</div>

Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/

edited Feb 16 '15 at 03:06

answered Feb 16 '15 at 02:55

Jason W

13,026
3
31
62

But it doesn't achieve stretching the height of div 1 :( – Daniel Williams Feb 16 '15 at 03:02
Sorry about that. Code now stretches div 1 – Jason W Feb 16 '15 at 03:06
It is. The changes were to the first table-cell div. I added `height:100%` and `class="div1"`, and then removed the inner div that had `class="div1"` so the height was pulled directly. Please check out the JSFiddle (I also updated that) to see if it's doing what you want. I made sure it was only 1 line on the div1 so you can see it being pulled down to match both div2 elements – Jason W Feb 16 '15 at 03:15

j8ey · Answer 2 · 2015-02-16T03:02:37.753

0

I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1. Im not sure it's the smoothest way to code, but it works. https://jsfiddle.net/pho5p7cc/3/

html

<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>

css

.div1 { 
    border: 1px solid red;
    float: left;
    width: 20px;
}
.div2 {
    border: 1px solid green;
    width: 50px;
    margin-left:20px;
}
.container{
}

edited Feb 16 '15 at 03:02

answered Feb 16 '15 at 02:56

j8ey

81
6

But it doesn't achieve stretching the height of div 1 :( – Daniel Williams Feb 16 '15 at 03:00
you need to apply your height to div1 add width:100px; to your css for div1 – j8ey Feb 16 '15 at 03:04
Technically, yes, this works, but I need it to stretch dynamically. The height of div 1 needs to be the height of the combined content of divs 2 and 3. – Daniel Williams Feb 16 '15 at 03:10

score 0 · Answer 3 · answered Feb 16 '15 at 02:58

Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.

Here's an example, http://jsfiddle.net/tjgerot/v2469Leu/

<div class="table">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div2">3</div>
</div>

Displaying divs like tables with rowspans

3 Answers3