3 column layout rendering issue

Question

I have a 3 col layout, left and mid col are images, and the last col is text. I want to keep the height of all col the same at all times even when the browser resizes. I don't mind having scroll bar on the last col with text.

HTML:

  <div class="mid-col">
    <img src=""/>
  </div>

  <div class="right-col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Sed  semper, eros nec sollicitudin porta, nibh justo consectetur elit, 
         a ultricies libero est ac justo. Nulla dictum dignissim placerat. 
         Donec non eros nisl. Morbi diam est, volutpat a orci tempus, mollis 
         maximus dui. Quisque consequat risus et sagittis dapibus. Mauris nulla 
         quam, ullamcorper a mattis sed, pretium sit amet dolor. Etiam pharetra 
         velit id lacus cursus imperdiet. Phasellus ex ipsum, finibus vitae 
         rhoncus et, suscipit at risus. Nam dignissim sapien tortor, ut 
         egestas tortor pulvinar ut. 
    </p>
  </div>
</div>

CSS:

#content-container {
    width: 100%;
    height: 33.333%;
}

.left-col img {
    width: 33.333%;
    float: left;
    display:block;
    box-sizing: border-box;
   -moz-box-sizing: border-box;
}

.mid-col img {
    width: 33.333%;
    float: left;
    display:block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.right-col {
    width: 33.333%;
    height: 33.333%;
    height: 100%;
    display:block;
    overflow: scroll;
}

The first `div` is missing. Please edit your question and add a blank line to fix the question format. — Barmak Shemirani, Jun 22 '15 at 02:12
Have a look at this S/O question, which may help you: http://stackoverflow.com/questions/12322191/html-css-2-column-layout-both-columns-same-height-automatically — Taryn East, Jun 22 '15 at 02:16

score 1 · Answer 1 · answered Jun 22 '15 at 02:54

The browser renders from top to bottom so you are getting the opposite effect. Try:

<div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

.container {
    height: 100%;
}
.child1 {
    width: 33.333%;
    height: 33.333%;
    float: left;
    box-sizing: border-box;
}
.child2 {
    width: 33.333%;
    height: 33.333%;
    float: left;
    box-sizing: border-box;
}
.child3 {
    width: 33.333%;
    height: 33.333%;
    float: left;
    box-sizing: border-box;
    overflow-y: auto;
}

The parent container can take up all the space. Each child can float to the left. Changing the box sizing keeps a consistent width for percentages.

score 1 · Accepted Answer · answered Jun 22 '15 at 02:54

you can achieve that by using display:table-[cell]

#content-container {
  width: 100%;
  display: table;
}
#content-container > div {
  display: table-cell;
  width: 33%;
  vertical-align: top;
  border: 1px solid green
}
img {
  width: 100%;
  display: block;
  height: auto;
}

<div id="content-container">
  <div class="left-col">
    <img src="http://lorempixel.com/100/100" />
  </div>
  <div class="mid-col">
    <img src="http://lorempixel.com/100/100" />
  </div>
  <div class="right-col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper, eros nec sollicitudin porta, nibh justo consectetur elit, a ultricies libero est ac justo. Nulla dictum dignissim placerat. Donec non eros nisl. Morbi diam est, volutpat a orci tempus,
      mollis maximus dui. Quisque consequat risus et sagittis dapibus. Mauris nulla quam, ullamcorper a mattis sed, pretium sit amet dolor. Etiam pharetra velit id lacus cursus imperdiet. Phasellus ex ipsum, finibus vitae rhoncus et, suscipit at risus.
      Nam dignissim sapien tortor, ut egestas tortor pulvinar ut.
    </p>
  </div>

</div>

Thanks for the answers it helped alot – Joseph Zammit Jun 22 '15 at 08:02 — Joseph Zammit, Jun 22 '15 at 08:02

score 0 · Answer 3 · answered Jun 22 '15 at 03:14

I like @beautifulcoder's answer but I have the same thing on one of my sites and handled it with jquery.

$(function() {
    var divHeight = $(window).height()/3;
    $('.left-col').css('height',divHeight));
    $('.mid-col').css('height',divHeight);
    $('.right-col').css('height',divHeight);
    $('.right-col').css('overflow-y','auto');
})

3 column layout rendering issue

3 Answers3