Equal height columns using only CSS


<div class="page-container"> 
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.  
    Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit,  
    lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,  
    dictum vitae mi. Donec sed bibendum ante. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.  
    Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit,  
    lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,  
    dictum vitae mi. Donec sed bibendum ante.
    </div> 
   
    <div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.
    </div> 
</div> 

.page-container { 
    display: table; 
} 
 
.content { 
    width: 450px;
    padding: 20px;
    float: none;
    display: table-cell;
    vertical-align: top;
    background-color: #CCC; 
} 
 
.sidebar {
    width: 250px;
    padding: 20px;
    float: none;
    display: table-cell;
    vertical-align: top;
    background-color: #999; 
} 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s