I attempted to implement the Matthew James Taylor method, utilizing three columns. However, my main issue arises when I desire the middle column to dictate the height. In other words, if the center div is 500px in height, I want the right div's height to also be 500px, even with an overflow:scroll property.
Here is the code on jsfiddle with a more detailed explanation
HTML:
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<p>Column 1</p>
<p>This is the main content of the middle column.</p>
</div>
<!-- Column 1 end -->
<div class="col2">
<p>Column 2</p>
<p>This represents the second column. Ideally, there wouldn't be a second column and the center div would be perfectly centered without it.</p>
</div>
<div class="col3">
<!-- Column 3 start -->
<p>Column 3</p>
<p>This depicts the right column. I'm aiming for its height to adjust according to the middle column's height. Instead of overflowing as it currently does, I wish for its height to match the middle column and have scrollable overflow.</p>
<!-- Column 3 end -->
</div>
</div>
</div>
CSS:
body {
margin:0;
padding:0;
width:100%;
}
/* column container */
.colmask {
clear:both;
float:left;
width:100%;
/* entire width of the page */
overflow:hidden;
/* Trim any extending divs */
}
/* common column settings */
.colright, .colmid, .colleft {
float:left;
width:100%;
/* width of the page */
position:relative;
}
.col1, .col2, .col3 {
float:left;
position:relative;
overflow:hidden;
}
/* Three-column layout settings */
.threecol {
background:#eee;
/* color scheme for the right column */
}
.threecol .colmid {
right:25%;
/* width of the right column */
background:#fff;
/* color scheme for the center column */
}
.threecol .colleft {
right:50%;
/* width of the middle column */
background:#aaa;
/* color scheme for the left column */
}
.threecol .col1 {
width:46%;
/* width of center column content (column width minus side paddings) */
left:102%;
/* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%;
/* Width of left column content (column width minus side paddings) */
left:31%;
/* width of (right column) plus (center column side paddings) plus (left column left padding) */
}
.threecol .col3 {
width:21%;
/* Width of right column content (column width minus side paddings) */
left:85%;
/* Please note the calculation here:
(100% - left column width) plus (center column side paddings) plus (left column side paddings) plus (right column left padding) */
}
I've tried to keep the code concise, but it was quite a task.
Appreciate your help!