A layout with two columns of equal height and one column has two rows

Question

I am currently developing a forum topic, and I am trying to figure out how to make the last bits, posts. An example of what I would like to do:

So, the main points to remember are how the information about the user and the mail content has different colors, and the description of the message in the grid is in the same column as the message content.

Using a simple div setting does not work, as I need the height of user information to control the height of Post Content and vice versa. The presence of a wrapper element with the background color User Info will work, but only if the Post Content is higher than the user information.

I'm really just looking for a brainstorm here. What would be the best way to do this?

---

, :

, , , .

1) , ? ? .

2) , Post . , ( desc-meta) , - ( desc-ID). (Edit, report ..) ( desc-edit), . flex , desc-meta desc-ID , desc-meta , .

Answer 1

CSS flexbox.

, , align-items, .

- stretch, .

.container-outer { align-items: stretch; }

flex-grow flex .

.post-content { flex-grow: 1; }

( ):

.container-outer {
    display: flex;
    align-items: stretch; /* tells boxes to stretch vertically (default value)  */
    width: 75%; 
    min-height: 250px;
    border: 5px solid mistyrose;   
}
.user-info {
    display: flex;          /* nested flexbox, to enable flex properties */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    border: 3px solid red;
    font-family: verdana;
    font-weight: bold;
    font-size: 2em;
    color: red;
    box-sizing: border-box;
    overflow: auto;
}
.container-inner {
    display: flex;         /* nested flexbox */
    flex-direction: column;
    width: 100%;
    border: 3px dashed black;
    overflow: auto;
}
.post-description {
    display: flex;         /* nested flexbox */
    justify-content: center;
    align-items: center;
    height: 50px;          /* fixed height */
    border: 3px solid green;
    font-family: verdana;
    font-weight: bold;
    font-size: 1.5em;
    color: green;
    box-sizing: border-box;
    overflow: auto;
}
.post-content {
    display: flex;          /* nested flexbox */
    justify-content: center;
    align-items: center;
    flex-grow: 1;          /* box takes all available space (stretch, basically) */
    border: 3px solid blue;
    font-family: verdana;
    font-weight: bold;
    font-size: 2em;
    color: blue;
    box-sizing: border-box;
    overflow: auto;
}

<article class="container-outer">
    <section class="user-info">USER<br>INFO</section>
    <div class="container-inner">
        <section class="post-description">POST DESCRIPTION</section>
        <section class="post-content">POST CONTENT</section>
    </div><!-- end .container-inner -->    
</article><!-- end .container-outer -->

Hide result

jsFiddle

, , .

(min-height: 250px;), , , .

flex-grow -, , , . , .

---

: Flexbox IE < 10. , Safari 8 IE10, . Autoprefixer. .

Answer 2

, - :

<div class="one">
</div>
<div class="container">
  <div class="two">
  </div>
  <div class="three">
  </div>
</div>

div , div .

.one {
  display: inline-block;
}
.container {
  display: inline-block;
}

Answer 3

display: table /. http://jsfiddle.net/ycsmo9vg/,

, 2 divs, 1 row, div - ( ). . div , . , row, row