CODEWITHSUNDEEP
cssresponsive-designneat
designerNProgrammer
designerNProgrammer

Reputation: 2701

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

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?

Upvotes: 2

Views: 3810

Answers (3)

Kyle Fiedler
Kyle Fiedler

Reputation: 146

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.

Upvotes: 1

Trevor
Trevor

Reputation: 13457

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>

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16841

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>

Upvotes: 1

Related Questions