0

I'm trying to get 2 divs to appear side by side in their parent and to both vertically fill the parent. I've tried setting height and min-height to 100% but I don't understand why its not working.

Here is my html:

<div class="calc-wrap clear">
  <h2>Title</h2>
   <div class="calc-content clear">
    <div class="calc-form">
      <form id="cost_calculator">
        <fieldset>
          <legend>
            <h3>Find out how much your stuff costs you</h3>
          </legend>
          <ol>
            <li class="one">
              <label for="cost_of_pack">quantity</label>
              <span class="pound-label">£</span>
              <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
            </li>
            <li class="two">
              <label for="quantity_smoked">How many per day?</label>
              <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
            </li>
          </ol>
        </fieldset>
      </form>
    </div>
    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>

And CSS:

.calc-content {
  display: inline-block;
  border: 3px solid blue;
  width: 100%;
  border-color: #87B7CD;
}

.calc-form,
.calc-save {
  height:100%;
  border: 1px solid red;
  float: left;
}

.calc-form {
  width: 60%;
}

.calc-save {
  width: 39%;
  background-color: #87B7CD;
}

.calc-results {
  float: left;
  width: 60%;
}

And a JS Fiddle

Any help would be much appreciated.

Steve W
  • 1,108
  • 3
  • 13
  • 35

6 Answers6

0

This is because the parent <div> has no defined height, so obviously, the children elements can't fill 100% of the parents' height.

Add a height to your parent's class calc-content, e.g. height: 200px;.

calc-content {
  display: inline-block;
  border: 3px solid blue;
  width: 100%;
  height: 200px;
  border-color: #87B7CD;
}
rojadesign
  • 385
  • 3
  • 14
0

One way is to use display: flex or display: inline-flex in your .calc-content rule.

joel
  • 29
  • 1
  • 3
0

Are you trying to do like this:

Removed height from .calc-form, .calc-save & modified .calc-content with display: flex;

.calc-content {
  display: flex;
  border: 3px solid blue;
  width: 100%;
  border-color: #87B7CD;
}

.calc-form,
.calc-save {
  
  border: 1px solid red;
  float: left;
}

.calc-form {
  width: 60%;
}

.calc-save {
  width: 39%;
  background-color: #87B7CD;
}

.calc-results {
  float: left;
  width: 60%;
}
<div class="calc-wrap clear">
  <h2>Title</h2>

  <div class="calc-content clear">
    <div class="calc-form">
      <form id="cost_calculator">
        <fieldset>
          <legend>
            <h3>Find out how much your stuff costs you</h3>
          </legend>
          <ol>
            <li class="one">
              <label for="cost_of_pack">quantity</label>
              <span class="pound-label">£</span>
              <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
            </li>
            <li class="two">
              <label for="quantity_smoked">How many per day?</label>
              <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
            </li>
          </ol>
        </fieldset>
      </form>
    </div>
    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>
Sinto
  • 3,915
  • 11
  • 36
  • 70
0

You can use "the Flex powers"! ;)

.calc-content {
  display: flex;
  /*display: inline-block;*/
  border: 3px solid blue;
  width: 100%;
  border-color: #87B7CD;
}

.calc-form,
.calc-save {

  border: 1px solid red;
  /*float: left;*/
}

.calc-form {
  width: 60%;
}

.calc-save {
  width: 39%;
  background-color: #87B7CD;
}

.calc-results {
  float: left;
  width: 60%;
}
<div class="calc-wrap clear">
  <h2>Title</h2>

  <div class="calc-content clear">
    <div class="calc-form">
      <form id="cost_calculator">
        <fieldset>
          <legend>
            <h3>Find out how much your stuff costs you</h3>
          </legend>
          <ol>
            <li class="one">
              <label for="cost_of_pack">quantity</label>
              <span class="pound-label">£</span>
              <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
            </li>
            <li class="two">
              <label for="quantity_smoked">How many per day?</label>
              <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
            </li>
          </ol>
        </fieldset>
      </form>
    </div>
    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>
ReSedano
  • 4,970
  • 2
  • 18
  • 31
0

Use display: flex on calc-content and keep the form element inside the fieldset element like shown below. Also need for float left now.

.calc-content {
  display: flex;
  border: 3px solid blue;
  width: 100%;
  border-color: #87B7CD;
}

.calc-form,
.calc-save {
  height: 100%;
  border: 1px solid red;
}

.calc-form {
  width: 60%;
}

fieldset {
  width: 60%;
}

.calc-save {
  width: 40%;
  background-color: #87B7CD;
}

.calc-results {
  float: left;
  width: 60%;
}
<div class="calc-wrap clear">
  <h2>Title</h2>

  <div class="calc-content ">


    <fieldset>
      <legend>
        <h3>Find out how much your stuff costs you</h3>
      </legend>
      <form id="cost_calculator">
        <ol>
          <li class="one">
            <label for="cost_of_pack">quantity</label>
            <span class="pound-label">£</span>

            <input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
          </li>
          <li class="two">
            <label for="quantity_smoked">How many per day?</label>
            <input type="number" id="quantity_smoked" name="quantity_smoked" value="0">

          </li>
        </ol>
      </form>
    </fieldset>

    <div class="calc-save">
      <div class="calc-results-content clear">
        <h3>Results</h3>
        <div class="calc-results">
          <div>
            <p id="weekly_cost">£<span>0.00</span> per week</p>
            <p id="monthly_cost">£<span>0.00</span> per month</p>
            <p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
          </div>
        </div>
        <div class="calc-quitnow">
          <p>Well done</p>
        </div>
      </div>
    </div>
  </div>
</div>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
0

.parentDiv {
  height: 250px;
  background: black;
  display:flex;
}

.childDiv {  
  width:50%;
  background: grey;
  padding:10px;
  border:1px solid black
}
<div class="parentDiv">
  <div class="childDiv">
    text1
  </div>
  <div class="childDiv">
    text2
  </div>
</div>
Gayashan Perera
  • 661
  • 7
  • 12