CODEWITHSUNDEEP
css
Lyn Headley
Lyn Headley

Reputation: 11588

How can I create two children to fill a parent's height?

Given an outermost "containing" div of arbitrary dimensions, I am looking for markup and css that will place two divs within it, and display them left to right, as follows. The first div, on the left, should have a fixed width of 200 pixels. It should take up 100% of the height of its parent. The second div, on the right, should take up the remaining width of the parent and also 100% of its height.

So, given the following HTML for a parent container along with the two children: 

<div class="a">
  <div class="b">

  </div>
  <div class="c">

  </div>
</div>

And given this CSS for the parent: 

.a {
  height: 300px;
  width: 600px;
  background-color: gray;
}

And given this incomplete CSS for the children: 

.b {
  background-color: red; 
}
.c {
 background-color: green;
}

How can I complete the CSS for the children, in a way that does not depend on the exact height and width of the parent?

(It would also be permissible to add another element ".d" as the parent of the two children, for example as a flex container, giving the following HTML: 

<div class="a">
  <div class="d">
    <div class="b">

    </div>
    <div class="c">

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

The point is that I cannot modify the outermost element, but I can accomplish my goals with any combination of elements and css beneath it.

)

Upvotes: 1

Views: 833

Answers (2)

Matthew Moore
Matthew Moore

Reputation: 866

display: flex was designed for this type of set up.

My personal favourite post, when I need to brush up on the settings, is CSS-Tricks': "A complete guide to Flexbox"

.a {
  display: flex; /* turn element into a flex container, and all its children into flex elements */
  flex-direction: row; /* render the flexbox horizontally */
  height: 300px;
  width: 600px;
  background-color: gray;
}

.b {
  width: 200px; /* Element will be exactly 200px wide */
  background-color: red;
}

.c {
  flex-grow: 1; /* This (flex) element will take all available space */
  background-color: green;
}
<div class="a">
  <div class="b">

  </div>
  <div class="c">

  </div>
</div>

Upvotes: 2

Matt Cremeens
Matt Cremeens

Reputation: 5151

This is how I do it: with relative positioning.

.b {
      background-color: red; 
     position: relative;
     left: 0px;
     top: 0px;
     width: 100px;
     height: 300px;


}
.c {
     background-color: green; 
     position: relative;
     left: 100px;
     top: -300px;
     height: 300px;

}

Basically, relative positioning moves the boxes relative to where they would have been under normal positioning.

Upvotes: 0

Related Questions