Equal Column Heights

Question

I want the east and west divs to extend down to match the height of the center div... possible?

Thanks so much.

.con{
padding-left: 22px;
padding-right: 22px;
overflow: hidden;
}

.col{
position: relative;
float: left;
}

.west{
width: 7px;
right: 22px; 
margin-left: -100%;
background: url(http://www.example.com/west.png) repeat-y;
padding: 0 0 0 15;
}

.east{
width: 7px;
margin-right: -22px;
background: url(http://www.example.com/east.png) repeat-y;
padding: 0 15 0 0;
}

.center{
width: 100%;
}


<div class="con">
  <div class="center col">
   Test Text<br/>
   Test Text<br/>
   Test Text<br/>
   Test Text<br/>
  </div>
  <div class="west col">
 </div>
 <div class="east col">
 </div>
</div>

This looks to be a duplicate of http://stackoverflow.com/questions/1780325/both-columns-same-height-as-deepest-column — James Sumners, Jun 09 '10 at 13:37

score 0 · Accepted Answer · edited May 23 '17 at 10:30

0

You can start with what's done here for CSS-only: HTML/CSS: Making two floating divs the same height

Or use JavaScript layouts.

edited May 23 '17 at 10:30

Community

1
1

answered Jun 09 '10 at 13:40

instanceof me

38,520
3
31
40

score 0 · Answer 2 · answered Jun 09 '10 at 13:45

0

I used this jQuery solution and it works great...

var maxHeight = 0;
$(".col").each(function(){
  maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);

Just FYI for others looking. Trying to css it tho.

answered Jun 09 '10 at 13:45

cjmcjm

607
1
5
6

Equal Column Heights

2 Answers2