Two Column CSS

Two Column CSS Demo of Equal Height Columns

by Emmanuel Garcia

HTML

<div id="container2">
	<div id="container1">
		<a href="http://raintreeclubvallarta.com/es/menus-de-restaurante-inizio/" target="_self"><div id="col1">
		<span class="tittle-menu">INIZIO RESTAURANT</span>
		</div></a>
		<a href="http://raintreeclubvallarta.com/en/tenampa-pool-bar-menu/" target="_self"><div id="col2">
			<!-- Column two start -->
		<span class="tittle-menu">TENAMPA POOL BAR</span>
		</div></a>
	</div>
</div>



<div class="group">
<div class="left"><div id="col1"><a href="http://raintreeclubvallarta.com/es/menus-de-restaurante-inizio/" target="_self"><span class="tittle-menu">INIZIO RESTAURANT</span></a></div>

</div>
<div class="right">
<div id="col2"><a href="http://raintreeclubvallarta.com/en/tenampa-pool-bar-menu/" target="_self"><span class="tittle-menu">TENAMPA POOL BAR</span></a></div>


</div>
</div>

CSS

#container1 {
    background-color: #fb5b59;
    float: left;
    position: relative;
    right: 50%;
    width: 100%;
}
#container2 {
    background-color: #36CBB1;
    clear: left;
    float: left;
    overflow: hidden;
    width: 100%;
}
#col1 {
    float: left;
    left: 52%;
    overflow: hidden;
    position: relative;
    width: 46%;
    height:90px;
    text-align:center;
    line-height: 90px;
}
#col2 {
    float: left;
    left: 56%;
    overflow: hidden;
    position: relative;
    width: 46%;
    height:90px;
    text-align:center;
    line-height: 90px;

}
.tittle-menu{font-size:18px; font-weight:bold; color:#fff;}

JavaScript

//http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm