Dreamweaver HTML-列高

Question

I'm having trouble making two columns expandable while retaining equal heights. I have included snippets from my CSS file and HTML. I have browsed through page after page of similar issues yet nothing seems to work! I know I'm probably forgetting something simple. Below is how my HTML is setup as well as some CSS. Above these tags are the header and nav but I did not think that code was relevant so I didn't post it.

<div id="Main">

    <div id="RightColumn-Template">
    <p>Hey</p>
    </div>

    <div id="LeftColumn-Template">
    <br><br><br>
    </div>
    </div>

#container {
width: 1000px;
margin-left:auto;
margin-right:auto;
overflow-y: auto;
}
header {
height: 136px;
width:1000px;
line-height:0px;
padding:0px;
margin:0px;
}
nav {
height: 30px;
width: 1000px;
background-color:#219971;
line-height:0px;
padding:0px;
margin:0px;
}
#Main {
width:1000px;
height:100%;
overflow:auto;
clear:both;
}
#RightColumn-Template {
background-image:url(../KeddcoImages/PipeBG.jpg);
background-repeat:no-repeat;
background-color:#A4A7AC;
padding:25px;
width: 200px;
height:100%;
float: left;
}
#LeftColumn-Template {
background-color:#FFF;
background-repeat:repeat-y;
padding:25px;
width:700px;
height:100%;
float:right;
}

Answer 1

There are few ways you can use to create equal height columns.

First one is Flex Method using display:flex .

 div#Main{display:flex;flex-direction: row;} div#Main >div{border:1px solid gray;width: 50%; padding: 10px;} 

  <div id="Main"> <div id="RightColumn-Template"> <p>Hey</p> <p>Hey</p><p>Hey</p><p>Hey</p> </div> <div id="LeftColumn-Template"> <p>Hey</p> </div> </div> 

second method is using display:table for parent element and display:table-cell for child element.

 div#Main{display:table;} div#Main >div{border:1px solid gray;width: 50%; padding: 10px;display:table-cell;} 

  <div id="Main"> <div id="RightColumn-Template"> <p>Hey</p> <p>Hey</p><p>Hey</p><p>Hey</p> </div> <div id="LeftColumn-Template"> <p>Hey</p> </div> </div>