How to place two horizontal div's next to a vertical one?

Question

I want to align my stuff as:

┌────┬─────────────────────────────────┐
│ No │  Some possible long content     │
│    ├─────────────────────────────────┤
│    │  Not so long stuff              │
└────┴─────────────────────────────────┘

Using tables would be like 5 minutes using rowspan=2 but using divs I don't know where to start. I think divs should should be used since this is not tabular data. Is just a way of layout a counter, a possible lone title and its subtitle (not that long):

<div id="container">
    <div class="div1">No</div>
    <div class="div2">Some possible long content</div>
    <div class="div3">Not so long stuff</div>
</div>

1 width is constant but its height should be the sum of 2 and 3 height. 3 always contain one line of code but 2 might contain more than 1 line.

Any help is appreciated

Answer 1

If you can change the HTML structure to wrap the right side divs then flexbox can do that.

.container {
  width: 50%;
  margin: auto;
  border: 1px solid grey;
  display: flex;
}
.div1,
.right {
  display: flex;
  flex-direction: column;
}
.div1,
.right > div {
  padding: 1em;
}
.div1 {
  background: orange;
}
.div2 {
  background: pink;
}
.div3 {
  background: lightblue;
}

<div class="container">
  <div class="div1">No</div>
  <div class="right">
    <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet explicabo omnis, suscipit laborum officiis, eius sint ipsam doloremque magnam reiciendis corporis repudiandae ducimus laboriosam ex! Porro dolores aut vitae. Assumenda ut laborum dolor
      fugiat ullam nihil enim sapiente ex vel praesentium quo dolores distinctio, aliquid perferendis non accusamus dolorum excepturi?</div>
    <div class="div3">Not so long stuff</div>
  </div>
</div>

Answer 2

You could use absolute positioning, like so: https://jsfiddle.net/sueba6t2/1/

Based on a modified HTML markup (where I renamed some classes to be compliant), here is the css:

.container {
    position: relative;
}
.d1 {
    height: 100%;
    position: absolute;
    width: 3em;
}
.d2, .d3 {
    margin-left: 3em;
}

Or, if you can change the markup and like newer, fancy stuff, use flex: https://jsfiddle.net/k7e01o29/

HTML:

<div>
    <nav>No</nav>
    <article>
        <section>Long content</section>
        <footer>Not long</footer>
    </article>
</div>

CSS:

div {
    display: flex;
    flex-direction: row;
}
article {
    width: 100%;
}

Be aware that the flexible box module is not supported in all browsers. If you want to support IE10 or below, you're going to have to use polyfills, which might be undesirable. Flex is much more powerful than what you are trying to achieve, but it has downsides when it comes to browser support.

Refer to http://caniuse.com/#search=flex for more details.

Answer 3

You can use css's display:table and display:table-cell

http://jsfiddle.net/8qv9z762/

#container {
    display: table;
    background-color: #dda;
    height: 1px; /*weird but important forgot why*/
}
.r {
    display: table-cell;
}
.div1 {
    height: 100%;
}
.div1, .div2, .div3 {
    border: solid 1px;
    padding: 5px 8px;
}

This has way better support across browser, flexbox is still not supported everywhere.

The table-cell is supported all the way to ie8, whereas, flex is supported only by ie11+ (last two versions)

Only draw back of this technique is you can't have margins. However, that's not a problem as you can have another child container that can be a main wrapper inside table-cell div and it can have margin.