CODEWITHSUNDEEP
htmlcss
Mina Hafzalla
Mina Hafzalla

Reputation: 2821

Div height does not stretch

This is blowing my mind. I have a wrapper div and 2 divs inside it, one of the divs its height is 100% but does not stretch to fit the wrapper.

Here is a JSFIDDLE

The HTML:

<div class="wrapper">

<div class="inner_left">
Just<br />Some<br />Words
</div>

<div class="inner_right">
Anything
</div>

</div>

The CSS:

.wrapper {
    width:auto !important;
    height:auto !important;
    margin:auto;
    float:left;
    padding:0;
    background-color:#ccc;
}
.inner_left {
    background-color:#f0f0f0;
    width:270px;
    height:auto !important;
    border:1px solid #666;
    float:left;
    margin:auto;
    padding:10px;
    text-align:center;
}
.inner_right {
    background-color:#f0f0f0;
    width:200px;
    height:100%;
    border:1px solid #666;
    float:right;
    margin:auto;
    padding:10px;
    text-align:center;
}

I need the div (inner_right) to auto fit the height of the wrapper. So whenever the wrapper's height shrinks or stretches, this div stretches to the maximum height of the wrapper.

Anyone knows why my code isn't working? Appreciate any help.

Upvotes: 1

Views: 974

Answers (3)

dzbo
dzbo

Reputation: 1155

Try to set 100% height to whole document:

html,body {
  height: 100%;
}

and for wrapper class:

.wrapper {
  width:auto !important;
  height: 100%;
  margin:auto;
  float:left;
  padding:0;
  background-color:#ccc;
}

fiddle

Upvotes: 1

dippas
dippas

Reputation: 60603

Here is a solution using display:table and display:table-cell

.wrapper {
  display: table;
  width: 100%; /* whatever you want */
  padding: 0;
  background-color: #ccc;
}
.wrapper > div {
  display: table-cell;
  border: 1px solid #666;
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}
.inner_left {
  width: 270px;
}
.inner_right {
  width: 200px;
}
<div class="wrapper">
  <div class="inner_left">Just
    <br />Some
    <br />Words</div>
  <div class="inner_right">Anything</div>
</div>

Upvotes: 1

Derek Misler
Derek Misler

Reputation: 106

@showdev is right, the parent element needs to have its height explicitly set in order for the height of the child element to work the way you want it to.

Upvotes: 1

Related Questions