How to make pane extend to the bottom of its container

Question

I have a site with two columns, a content one and a menu one. The menu is fairly large and will sometimes be taller than the content pane. I basically have the following setup at the moment:

.container {
    width: 300px;
    margin: auto;
    background: red;
}
#first {
    width: 75%;
    float: left;
    background-color: blue;
}
#second {
    width: 25%;
    float: left;
    background-color: green;
    color: white;
}
#clear {
    clear: both;
}
a {
    color: white;
}
* {
    color: white;
}

<div class='container'>
    <div id="first">Some content</div>
    <div id="second">Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu</div>
    <div id="clear"></div>
</div>

The #first div doesn't reach the bottom of the container, even when I add height: 100%;. How can I fix this?

There are plenty of ways, see [CSS - Equal Height Columns?](http://stackoverflow.com/questions/2114757/css-equal-height-columns) — Stickers, Apr 15 '16 at 18:39

Asons · Answer 1 · 2016-04-15T18:52:21.967

1

You need a height on its parents all the way to the html/body tags

.container {
  display: flex;
  width: 300px;
  margin: auto;
  background: red;
}
#first {
  flex: 1;
  width: 75%;
  background-color: blue;
}
#second {
  flex: 1;
  width: 25%;
  height: 300px;
  background-color: green;
  color: white;
}
a {
  color: white;
}
* {
  color: white;
}

    <div class='container'>
        <div id="first">Some content</div>
        <div id="second">Menu</div>
    </div>

For older browsers...display: table

.container {
  display: table;
  width: 300px;
  margin: auto;
  background: red;
}
#first {
  display: table-cell;
  width: 75%;
  background-color: blue;
}
#second {
  display: table-cell;
  width: 25%;
  height: 300px;
  background-color: green;
  color: white;
}
a {
  color: white;
}
* {
  color: white;
}

<div class='container'>
        <div id="first">Some content</div>
        <div id="second">Menu</div>
    </div>

edited Apr 15 '16 at 18:52

answered Apr 15 '16 at 18:39

Asons

84,923
12
110
165

Umm... I don't think it is working :| – J Atkin Apr 15 '16 at 18:40
@JAtkin What you mean when you say it is not working? – Asons Apr 15 '16 at 18:42
The `some content` pane is supposed to reach down to the end of the menu pane, and possibly further based on the content. – J Atkin Apr 15 '16 at 18:43
@LGSon when the viewport height is smaller than 300px. – Stickers Apr 15 '16 at 18:44
Oh, hehe ;) Thanks @Pangloss! That explains it. – J Atkin Apr 15 '16 at 18:48
@JAtkin Updated using `flex` instead ... much better solution, will that work for you? ...If no, I will add a `display: table` too – Asons Apr 15 '16 at 18:49
Probably, I'll need to try later. (BTW, I have no idea how HTML and CSS code work, I'm just playing with some example code I found, so that's why I sound clueless ;) – J Atkin Apr 15 '16 at 18:51
@JAtkin I added the `display: table` too – Asons Apr 15 '16 at 18:53

score 1 · Answer 2 · answered Apr 15 '16 at 18:45

You can use flexbox

.container {
width: 300px;
margin: auto;
background: red;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#first {
width: 75%;
float: left;
background-color: blue;
}
#second {
width: 25%;
float: left;
background-color: green;
color: white;
}
#clear {
clear: both;
}
a {
color: white;
}
* {
color: white;
}

<div class='container'>
<div id="first">Some content</div>
<div id="second">Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu</div>
<div id="clear"></div>
</div>

CodeWeis · Answer 3 · 2016-04-15T18:56:08.720

0

you have to give the container an height because if not #first will be 100% of how what if the parent don't have a height the child can not be 100% of it!!

Maybe you give him 300px like the #second or less and then you give #first 100% and it will work

edited Apr 15 '16 at 18:56

answered Apr 15 '16 at 18:42

CodeWeis

846
6
19

How to make pane extend to the bottom of its container

3 Answers3