1

How can I get the "content" <div> of these two columns to fill the container's entire height?

jsfiddle: http://jsfiddle.net/7m4f7/8/

This is a follow up to this question: Make children divs the height of tallest child.

Here is a similar question, but the solutions don't seem to work. Make div (height) occupy parent remaining height

Community
  • 1
  • 1
Don P
  • 60,113
  • 114
  • 300
  • 432
  • Take a look at the second answer here: http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – jabbink May 16 '13 at 19:41
  • A similar solution as this one I published could be implemented in your example if it is ok for you to float your divs. See here http://stackoverflow.com/questions/16545531/auto-stretching-vertical-columns-divs/16545816#16545816. I can apply something similar for your example... . – Fico May 16 '13 at 20:12
  • How critical is your HTML? Your current mark-up will not make this possible using CSS alone. However, there is hope. How critical are the borders? And can I make some minor changes to the HTML? – Marc Audet May 16 '13 at 20:17

2 Answers2

1

Instead of using the display:inline-block, I used floats. In order to obtain the same height , I used the content div to push the item div through the padding/margin compensation. The background color of the title and content are now independent. You can changed at will. The automatic margin between the inline-block elements can be replaced with regular margins applied to the divs at will or if you prefer just take them away. You get the following: enter image description here

Fiddle here

markup did not change Css as follows

.row {
    border: 1px solid red;
    overflow:hidden;
}

.item {   
    float:left;
    margin-right:4px; 
}

.title, .content {
    border: 1px solid rgba(0,0,0,0.2);
}
.content  {
       padding-bottom:1000px;
    margin-bottom:-1000px;
        background: rgba(0,0,0,0.1);
}
.title {
    background-color: rgba(0,0,0,0.2);
}
Fico
  • 2,317
  • 18
  • 19
0

Not exactly what you asked for, but maybe this is sufficient. When you add vertical-align: top;, the top edges will align nicely 

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
    vertical-align: top;
}

JSFiddle

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198