How to Make a Div Stretch Its Height Between Two Other Divs and Center Its Content

How to make a div stretch its height between two other divs and center its content

2018 update

use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:

body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

article {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="page">
  <header>header content</header>
  <article>main content</article>
  <footer>footer content</footer>
</div>

make div's height expand with its content

You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:

.clear { clear: both; }

Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:

body {  margin: 0;}
.flex-container {  display: flex;  flex-direction: column;  min-height: 100vh;}
header {  background-color: #3F51B5;  color: #fff;}
section.content {  flex: 1;}
footer {  background-color: #FFC107;  color: #333;}

<div class="flex-container">  <header>    <h1>     Header       </h1>  </header>
  <section class="content">    Content  </section>
  <footer>    <h4>      Footer    </h4>  </footer></div>

Stretch (vertically) middle div between the other two

CSS Tables (not actual tables)

body {  margin: 0;}.parent {  height: 100vh;  display: table;  width: 100%;}header,footer {  max-height: 25vh;  display: table-row;  background: lightblue;}main {  height: 100%;  background: pink;  display: table-row;}

<div class="parent">  <header>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus quod, odit minus doloremque nesciunt voluptates veniam possimus voluptate sapiente provident, magnam sed, ipsam pariatur.</p>  </header>  <main>    <p>content</p>  </main>  <footer>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sed eligendi quibusdam voluptatibus consequatur cum, velit illo. Aperiam similique laudantium praesentium veniam repellat consequuntur et!</p>  </footer></div>

How to make a div's width stretch between two divs

If you add your filler element after the floated elements, and then change up its styles a little bit (including giving the style-block the correct id), you can get what you're going for:

#left {  display: inline-block;  float: left;  padding: 0px 20px 0px 20px;  height: 45px;  text-align: center;  line-height: 300%;  background: #FF9000;  color: #FFFFFF;}#filler {  display: block;  float: none;  height: 45px;  background: #F00;}#right {  display: inline-block;  float: right;  padding: 0px 20px 0px 20px;  height: 45px;  text-align: center;  line-height: 300%;  background: #FF9000;  color: #FFFFFF;}#contain {  width: 100%;  height: 45px;  padding: 0;  margin: 0;  display: inline;}

<div id="contain">  <div id="left">1</div>  <div id="right">2</div>  <div id="filler">m</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>

Center div between two divs vertically

That is what flex is for, assuming that you don't have to support older browsers. See can I use.

.parent {  position: relative;  background: black;  color: white;  min-height: 100px;  display:flex;  flex-direction: column;  align-content: space-between;  padding: 0 40px;  border: 1px solid white;  width: calc(33% - 90px);  float:left;}.parent:before {  content: " ";  position: absolute;  top: 50%;  left: 0;  right: 0;  height: 1px;  background: red;}.parent h2 {  position: absolute;  top: 50%;  margin: 0;  transform: translateY(-50%);}.subtitle {  padding: 40px 0;}

<div class="parent">   <div class="subtitle">Subtitle</div>   <h2>Title</h2>   <div class="subtitle">Subtitle</div></div>
<div class="parent">   <div class="subtitle">Subtitle<br/>Subtitle<br/>Subtitle</div>   <h2>Title</h2>   <div class="subtitle">Subtitle</div></div>
<div class="parent">   <div class="subtitle">Subtitle</div>   <h2>Title long<br/>2 lines</h2>   <div class="subtitle">Subtitle</div></div>

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

How to center a div in the remaining space left by sibling divs

You let the browser calculate the margins for you:

margin-left: calc((10% + 50px) / 2);
margin-right: calc((10% - 50px) / 2);

* {  padding: 0;  margin: 0;}
#nav-top {  position: sticky;  top: 0;  z-index: 1;  height: 50px;  margin-bottom: 20px;  background-color: DodgerBlue;}
#nav-left {  position: fixed;  top: 50px;  width: 50px;  height: 100%;  background-color: Silver;}
#body-content {  background-color: Tomato;  color: white;  width: 90%;  margin: auto;  margin-left: calc((10% + 50px) / 2);  margin-right: calc((10% - 50px) / 2);}

<div id="nav-left"></div><div id="nav-top"></div><div id="body-content">  <div id="breadcrumb">You are here: Home</div>  <div class="jumbotron">    <h1>Builder v2</h1>    <p class="lead">Software v2 is the new version of the site!</p>  </div>  <div class="content-row">    <div class="col-33">      <h2>Fun!</h2>      <p>Improved for more fun!</p>    </div>    <div class="col-33">      <h2>Challenging!</h2>      <p>Improved to be more challenging!</p>    </div>    <div class="col-33">      <h2>Share it!</h2>      <p>New features to share your best moments!</p>    </div>    <div class="col-33">      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>    </div>  </div>  <hr>  <footer>    <p class="copyright">2019</p>  </footer></div>

How to stretch a div in the container of 2 divs?

Simply use flex like this:

.container {  display: flex;  align-items: flex-start;}
.left {  background: green;  border: 1px solid blue;  flex: 1; /* This will make your element fill the remaining space*/}
.right {  background: yellow;  width: 60px;  border: 1px solid red;}

<div class="container">  <div class="left">    <pre>      dkdkdkd      dkdkdkdkd      fjfjf            fjfjfj    </pre>  </div>  <div class="right">    <button>    dfdf    </button>  </div></div>

---

Related Topics