How to make a dynamic-height DIV

Question

I have a float: left siderbar <div> that has min-height set to 500px.

The content area <div> to the left of it also has min-height of 500px.

What I can't seem to figure out is this: if the height of the content <div> goes over 500px due to longer page content, how do I get the sidebar <div> to grow downward pixel-for-pixel, matching the height of the content <div>, so that it is still touching the footer <div> that is below both of those (it uses clear: both)?

I could use a table to do this, but I'd really rather find the CSS to do it more... "properly."

The current CSS for the content, sidebar, and footer <div>'s:

#ContentHolder
{
    float:left;
    padding-left: 10px;
    width: 590px;
    min-height: 500px;
}

#SideBar
{
    float: left;
    width: 200px;
    min-height: 500px;
    background-color: #4a4a4a;
    border-top: 2px solid #404040;
    border-top-left-radius: 7px;
    background-image: url('Images/SideBar.gif');
    background-repeat: repeat-x;
    background-position: bottom;
}

#Footer
{
    clear: both;
    background: #404040;
    font-size: 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #707070;
    text-shadow: 0 1px 0 #202020;
}

score 2 · Accepted Answer · edited May 23 '17 at 11:45

2

I think you are searching for FlexBox

Here we go: CSS - Equal Height Columns?

I hope I helped ya, good luck.

edited May 23 '17 at 11:45

Community

1
1

answered Feb 26 '16 at 21:06

Giovanni Perillo

116
7

Beautiful! I had no idea this existed. Just added a DIV around the two columns with css of the DIV set to display: flex. – David Mancini Feb 26 '16 at 21:28

score 0 · Answer 2 · answered Feb 26 '16 at 21:08

You just need some simple CSS, have two columns, set their width,float one side or the other, and then having a div tag to clear these columns will make sure anything that appears after that, gets rendered below.

.clr {
  clear: both;
}

.column1 {
  width: 500px;
}

.column2 {
  float: right;
  width: 300px;
}

<div class="column1">
no matter how big this, does nto matter
</div>

<div class="column2">
this does not matter
</div>

<div class="clr"></div>

<div class="footer">
This is my footer
</div>

How to make a dynamic-height DIV

2 Answers2