CODEWITHSUNDEEP
htmlcss
Joseph Zammit
Joseph Zammit

Reputation: 373

3 column layout rendering issue

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;
}

Upvotes: 1

Views: 99

Answers (3)

petebolduc
petebolduc

Reputation: 1263

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');
})

Upvotes: 0

dippas
dippas

Reputation: 60573

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>

Upvotes: 1

beautifulcoder
beautifulcoder

Reputation: 11340

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.

Upvotes: 1

Related Questions