set height of a div equal to outer container in bourbon neat

Question

i am quite a newbie to neat. i have an outer container and 2 inner containers. one is leftcontainer and one is right. the right container has more text then left container so the height auto expands. the left container has less content so it's height dosen't match the other container. how can i set the left container height equal to right container in neat? here is my image. enter image description here

here is the code

  .mainContainer
{

@include outer-container;



}
.rightcontainer
{
    padding:10px;
background-color:orange;

            @include media($mobile) { 
            @include span-columns(10 of 10)
        }

        @include media($tablet) { 
            @include span-columns(5 of 10)
        }

        @include media($laptop) { 
            @include span-columns(5 of 10)
        }

        @include media($large-desktop) { 
            @include span-columns(5 of 10)
        }

}
.leftcontainer

{
    padding:10px;

background-color:silver;
            @include media($mobile) { 
            @include span-columns(10 of 10)
        }

        @include media($tablet) { 
            @include span-columns(5 of 10)
        }

        @include media($laptop) { 
            @include span-columns(5 of 10)
        }

        @include media($large-desktop) { 
            @include span-columns(5 of 10)
        }

}

Thanks Since neat has it's own settings please tell me how to do in neat?

You may find [http://css-tricks.com/fluid-width-equal-height-columns/](http://css-tricks.com/fluid-width-equal-height-columns/) useful — a5hk, Oct 15 '14 at 17:08
Perhaps you could setup a [plunker](http://plnkr.co/) with your example code and the `neat` framework? — Trevor, Oct 16 '14 at 06:21

score 1 · Answer 1 · answered Oct 15 '14 at 17:01

Make them display: table-cell elements and they'll automatically fit each other's height.

.left, .right {
  display: table-cell;
  border: 1px solid red;
  width: 50%;
}

<div class="left">
  text text text text text text text text text text text text text text text text text text text text 
</div>

<div class="right">
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>

You'll also want to set the main container to display: table since some browsers may not render this properly. — geno_blast, Oct 15 '14 at 17:06

Trevor · Answer 2 · 2014-10-15T17:20:42.777

In order to set the height of a child element, you must set a height on the parent element. From the W3C:

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

In this example, I set the height of the outer div to 130px, but you could set it to a percentage. For example you could use this styling to fill the browser window:

html,body,.outer{height:100%;}

Here's the working example with .outer's height set to 130px:

.outer{
  border:solid 1px #000;
  padding:.5em;
  margin:1em;
  height:130px;
}
.inner{
  width:50%;
  padding:.5em;
  box-sizing:border-box;
  height:100%;
}
.left{
  background-color:#cba;
  float:left;
}
.right{
  background-color:#abc;
  float:right;
}

.clearfix{
  clear:both;
}

<div class='outer'>
  
  <div class='left inner'>Hello World</div>
  <div class='right inner'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  
  <div class='clearfix'></div>
</div>

Tested in the latest versions of Chrome, Firefox, Safari, Opera, and in IE 8-11. It's working fine in all of these. — Trevor, Oct 15 '14 at 17:18
Perhaps I misunderstood you. Did you mean that the example isn't working for you or that you applied the example to your own code and that didn't work? — Trevor, Oct 15 '14 at 17:42
i applied example on my code and it didn't work.. maybe because Neat is emitting some of it's own css.. — designerNProgrammer, Oct 16 '14 at 06:15

score 1 · Answer 3 · answered Oct 15 '14 at 18:35

Neat has table display built in, which is a way that you could accomplish this. Check out the docs for row and span-columns both take a display setting. There is also a bit of refactoring you could do here since Neats media queries are mobile first:

.mainContainer {
  @include outer-container;
  @include row(table);
}

.rightcontainer,
.leftcontainer {
  padding:10px;

  @include media($tablet-and-up) { 
    @include span-columns(5 of 10, table)
  }
}

.rightcontainer {
  background-color:orange;
}

.leftcontainer {
  background-color:silver;
}

You could also use absolute positioning to get this effect or flex-box which is now in Bourbon.

can you exactly tell me how can i use flex to achieve thisthanks — designerNProgrammer, Oct 16 '14 at 06:17

set height of a div equal to outer container in bourbon neat

3 Answers3