Div 100% height with display inline

Question

I need to have 2 columns of divs.

The right column will have a random content which may have 1 line or 100 lines.

The left column I want to follow the height of the right column without javascript.

I am trying this:

<div>
   <div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">
   </div>
   <div style="display:inline-block; width:30%; vertical-align:top;">
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
   </div>
</div>

The problem is that the left column is always with height 0px, it should show a red column with the same size as the right column.

So how do I do that using div?

EDIT

Rick Hitchcock's answer is really great but does not work with Firefox. Any other suggestion?

Possible duplicate of [Percentage Height HTML 5/CSS](http://stackoverflow.com/questions/1622027/percentage-height-html-5-css) — Zakaria Acharki, Nov 16 '15 at 19:15
There are some good answers here about how to make the div for the left column 100% height. In case it's helpful, note that a similar effect can also be achieved with background colors without having to necessarily make the div 100% height. i.e. you can use a red background for the container div and a white background for the right column. — Matt Browne, Nov 16 '15 at 19:19
Mine does follow your 30% now, and why do you need it to be inline-block? — Asons, Nov 16 '15 at 20:08
BTW if you're going to do these sorts of layouts a lot, you may want to consider a grid framework. 2 favorites of mine are http://materializecss.com/ and http://purecss.io/. Or for some good modern theory if you wanted to do it yourself: http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/ — Matt Browne, Nov 17 '15 at 05:25

Asons · Accepted Answer · 2015-11-16T20:18:04.573

Use display: table instead.

.wrapper {
  display: table;
  width: 60%;
}
.left {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#F00;
}
.right {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#0F0;
}

<div class="wrapper">
    <div class="left">
      LEFT
    </div>
    <div class="right">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
    </div>
</div>

Update

And if your really need inline-blocks, here I added them inside the table-cell and you can style how you want.

.wrapper {
  display: table;
  width: 60%;
}
.left {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#F00;
}
.right {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#0F0;
}
.inner {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #0ff
}
.right .inner {
  background:#FF0;
}

<div class="wrapper">
    <div class="left">
      <div class="inner">
        LEFT
      </div>
    </div>
    <div class="right">
      <div class="inner">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
      </div>
    </div>
</div>

your code does not work with the 30% width. For some reason the 30% does not work. — Samul, Nov 16 '15 at 19:27
@Samul Now they do and as they are known, you just set the combined width to the wrapper. — Asons, Nov 16 '15 at 20:04
would you mind telling me why did you use 30%? In this case, 50% or any other value would work the same, right? But see, if I need one div to be 30% and the other 70%, how would I do? — Samul, Nov 16 '15 at 21:14
I am an idiot, your answer worked perfectly with 30-70%. Thank you so much, I will not bother you anymore! — Samul, Nov 16 '15 at 21:28

Rick Hitchcock · Answer 2 · 2015-11-16T19:17:17.390

2

Give the containing div a table display with 100% width.

Its children will then behave like table cells and grow to match the highest div on their row.

.container {
  display: table;
  width: 100%;
}

<div class="container">

    <div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">

    </div>

    <div style="display:inline-block; width:30%; vertical-align:top;">

        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>

    </div>

</div>

edited Nov 16 '15 at 19:17

answered Nov 16 '15 at 19:16

Rick Hitchcock

35,202
5
48
79

I wonder if it might make more sense to use `display:table-cell` for the columns rather than `inline-block`, given that you're using `display:table`... – Matt Browne Nov 16 '15 at 19:23
I really need "display:inline-block" and your answer works perfectly. The other answer is also really good but it does not use inline-block – Samul Nov 16 '15 at 19:25
@MattBrowne, if you use `table-cell` alone, the 30% width is not accounted for. – Rick Hitchcock Nov 16 '15 at 19:26
Will not the inner divs become "table-cell" automatically when parent it set to "display:table"? – Asons Nov 16 '15 at 19:27
@Rick Hitchcock you are a master! Indeed, 30% only works if display is set to inline-block! Thank you so much! – Samul Nov 16 '15 at 19:28
@LGSon, that's a really good question. If you inspect the `div`'s in my solution, you'll see that they're still inline-block. They behave like table cells, but the 30% width is honored, which doesn't happen with `display: table-cell`. – Rick Hitchcock Nov 16 '15 at 19:31
@Rick Hitchcock one problem, your solution does not work on Firefox. Any idea why? – Samul Nov 16 '15 at 19:41
Hmm, @LGSon may have the better answer after all. Just set the wrapper's width at 60%. – Rick Hitchcock Nov 16 '15 at 19:50
@RickHitchcock Yes, I see they do, though FF obviously wont comply ... and I updated my answer with the 60%. – Asons Nov 16 '15 at 20:06
@RickHitchcock thank you so much and indeed LGSon works a little better. – Samul Nov 16 '15 at 21:11
But it still has a flaw: if the left div must be width 30% and the right one 70% of width, how should I do? Rick Hitchcock method works really good on Chrome but not on FF. LGSon works fine on both browsers but 30% and 70% would not work. So how should I do that? – Samul Nov 16 '15 at 21:15
I am an idiot, your answer worked perfectly with 30-70%. Thank you so much, I will not bother you anymore! – Samul Nov 16 '15 at 21:28
No problem. You could also do a flexbox solution: http://jsfiddle.net/8yLck1at/ – Rick Hitchcock Nov 16 '15 at 21:30
indeed Rick Hitchcock , flexbox is really nice I have never heard of it. If I need something more complicate I will surelly use that. Thank you so much! – Samul Nov 17 '15 at 00:58

score 0 · Answer 3 · answered Nov 16 '15 at 19:16

This article seems to explain the flexbox method for this pretty well and has a fallback in JS for browsers that don't have flexbox.

I have been using flexbox for awhile with the help of Bourbon and other mixins with my scss. It seems confusing at first but the first article should help you solve your problem while getting your feet wet in flexbox.

score -1 · Answer 4 · edited Dec 19 '17 at 16:49

-1

Try the following:

html,body {
  height:100%;
  display:table;
} 

.left, .right {
height:100%;
width:50%;
float:left;
display:table-cell;
} 
  
.left { 
  background:red;
}

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Page Title</title> 
  <style> 
  </style> 
  </head> 
  <body> 
    <div class="left"> </div> 
    <div class="right"> 
      <h1>This is a Heading</h1> 
      <p>This is a paragraph.</p>
      <h1>This is a Heading</h1> 
      <p>This is a paragraph.</p>
      <h1>This is a Heading</h1> 
      <p>This is a paragraph.</p>
      <h1>This is a Heading</h1> 
      <p>This is a paragraph.</p> 
    </div> 
  </body> 
</html>

edited Dec 19 '17 at 16:49

Chris

148
10

answered Nov 16 '15 at 19:12

Raghavendra S

513
1
5
16

please check this ` Page Title

This is a Heading

This is a paragraph.
This is a Heading

This is a paragraph.
This is a Heading

This is a paragraph.
This is a Heading

This is a paragraph.

` – Raghavendra S Nov 16 '15 at 19:37

Div 100% height with display inline

4 Answers4

This is a Heading

This is a Heading

This is a Heading

This is a Heading

Linked