CSS - Side-by-Side Divs Inherit Height?

Question

Trying to learn to manually set up 12-Column grids. I'd like my grid_8 and grid_4 to expand to be the same height. They're set to inherit height, as is their parent ("container"), so my thought is that they should all match the height of the outermost div, "main_content", which I think I have set up to dynamically change its height.

The container and grid_8 divs seem to match the height properly, but why not my grid_4 div? If I manually fix the height of the main_content div, than they all expand in height properly, but why does it not work in this case?

Any help as to what I'm not understanding would be appreciated.

HTML:

<body>
  <div class="main_content">
    <div class="container">
      <div class="grid_8">
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum."

          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
      </div>
      <div class="grid_4">
        <p>
          This should be the same height as the div to my left.
        </p>
      </div>
    </div>
  </div>
</body>

CSS:

body{
  margin: 0px;
  box-sizing: border-box;
}

.container {
  width: 964px; /* Account for borders */
  height: inherit;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid red;
}

div[class^="grid"]{
  float: left;
  margin: 0 auto;
  height: inherit;
}

.grid_4 {
  width: 320px;
  border: 1px solid blue;
}

.grid_8 {
  width: 640px;
  border: 1px solid green;
}

.main_content{
  overflow: hidden;
  /* height: 600px; */
  border: 1px solid black;
}

JSFiddle

Answer 1

What I can see is you have not provided any height to main_content, hence grid have also inherited no height at all. so the height they are getting is only because of the content present inside them.

and when you are setting the value manually(600px) then the container and grids are inheriting that much value and are getting properly arranged.

CSS - Side-by-Side Divs Inherit Height?

Question

1 answers

solution1
0 ACCPTED 2016-01-31 08:08:23

CSS - Side-by-Side Divs Inherit Height?

Question

1 answers

solution1 0 ACCPTED 2016-01-31 08:08:23

solution1
0 ACCPTED 2016-01-31 08:08:23