Two Divs Inside Div. How to Auto-Fill The Space of Parent Div by Second Div

Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

Add display:table; to parent div and display:table-row; to child divs

And height:0 to first child div. This takes auto height

    html,body{
    height: 100%;
}
.outer{
    background-color:blue;
    height: 80%; border:red solid 2px;
    display: table;
     width:100%
}
.inner-title{
    background-color:red;
    display:table-row; 
     width:100%
}
.inner-content{
    background-color:grey;
    display:table-row;
    width:100%;
    height:100%
}

DEMO UPDATED

Two divs, one under another, one dynamic and second fill the rest of space

I think having a fixed height and width of parent will cause the child elements to overflow.

Here is the JsFiddle Example with dynamic height and width of parent which works as per your expectation.

.parent{  background-color:yellow;  padding:2em;  width:100%;  display:flex;  flex-direction: column;}
.child{  height:auto;}
#child1{  flex:1;   background-color:red;   padding:0.5em;}
#child2{  flex:1;   background-color:blue;   padding:1em 1.5em;   text-align:center;}
#child2 img{    margin: 0 auto;  height: 90%;  width: 90%;}

<div class="parent">   <div class="child" id="child1">   sometest sometest sometestsometest sometest sometest   sometest sometest sometestsometest sometest sometest   sometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest    </div>   <div class="child" id="child2">     <img src=""/>   </div></div>

Two divs in a parent div not taking 100% height

If you want a table-like experience for the div positioning, it would be better to use :

display:table-cell on the 2 div's and display:table-row on the parent div instead of the floats.

Here's an updated fiddle : fiddle

Two divs - one fixed height, the other to fill the remaining space

define child2's height and width as follows:

height: calc(100% - 15px);
width: calc(100% - 5px);

.container {  width: 100%;  height: 100px;  background: blue;  position: relative;}
.child1 {  position: absolute;  top: 0;  height: 15px;  width: 100%;  background: red;}
.child2 {  position: absolute;  top: 15px;  height: calc(100% - 15px);  width: calc(100% - 5px);  margin-left: 5px;  background: green;}

<div class="container">  <div class="child1"></div>  <div class="child2"></div></div>

Auto adjust vertial space between two DIVs

Hope you are looking for something like this

.parent{  height: 200px;  display: flex;  flex-direction: column;  justify-content: space-around;  align-items: center;  border: 1px solid blue;}.child-one{  flex: 1;  display: flex;  align-items: center;  background: blue;}.child-two{  background: red;}.parent div{  padding: 5px 10px;}

<div class="parent">    <div  class="child-one">        Auto adjust the space of this div depending upon "child-two" div heightLorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te    </div>    <div class="child-two">        Height of this div will depend upon the data filled.Lorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te    </div></div> 

How to place div side by side

There are many ways to do what you're asking for:

1. Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

Second DIV on all remaining space

You can use css table properties to create this layout.

HTML:

<div id="super">
  <div id="top">
    <div class="content">
      top
    </div>
  </div>
  <div id="bottom">
    <div class="content">
      bottom
    </div>
  </div>
</div>

Necessary CSS:

html,
body {
  height: 100%;
}
#super {
  height: 100%;
  width: 100%;
  display: table;
}
#super > div {
  display: table-row;
}
#top {
  background: green;
}
#bottom {
  background: blue;
}

html,body {  height: 100%;  padding: 0;  margin: 0;}#super {  height: 100%;  width: 100%;  display: table;}
#top {  background: green;  overflow: hidden;  height: 1%;}
.content {  padding: 10px;}
#bottom {  background: blue;}
#super > div {  display: table-row;}

<div id="super">  <div id="top">    <div class="content">      top    </div>  </div>  <div id="bottom">    <div class="content">      bottom</div>  </div></div>

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Multiple divs span height of parent

Let's say you have this:

body {  margin: 0;}.parent {  background-color: peachpuff;  min-height: 100vh;}.child:first-child {  background-color: chartreuse;}.child:nth-child(2) {  background-color: dodgerblue;}.child:last-child {  background-color: coral;}

<div class="parent">
  <div class="child">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </div>
  <div class="child">    Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc odio leo, accumsan in ipsum eu, porttitor ornare sapien.  </div>
  <div class="child">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus pharetra, vestibulum enim in, pellentesque metus. Curabitur fringilla facilisis pretium. Vivamus eu sapien id eros interdum ultrices et a turpis. Class aptent taciti sociosqu ad litora    torquent per conubia nostra, per inceptos himenaeos.  </div>
</div>

---

Related Topics