setting equal heights to columns

I am using twitter-bootstrap framework to create an 'article' with two columns. text on one side, and a column with a background image on the right.

HTML

<article> <div class='container-fluid'> <div class="row"> <div class="col-md-8 indx-img" style="background-image:url('...');"> </div> <div class="col-md-4 col-md-pull-8"> <div class="text-cell"> <h1>ttitle</h1> <h3>text</h3> </div> </div> </div><!-- /#row --> </div><!-- /#post --> </article>

I want the article to have a responsive height. (a % or something) that shrinks as the screen size decreases. I need both columns to have the same height (the background-img one needs a height in order to display the background image)

My current css uses padding to generate a responsive size to the background-img column (padding: 16% 0;), but doesn't affect the left column ( I want the text vertically centered in its column)

I tried height: 30%; on article, but it does't add any height to the columns themselves.

-------------Problems Reply------------

Chris Coyier has a good solution for this already. I recommend reviewing this: https://css-tricks.com/fluid-width-equal-height-columns/

Example from article:

HTML

<div id="css-table">
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>

CSS

#css-table {
display: table;
}
#css-table .col {
display: table-cell;
width: 25%;
padding: 10px;
}
#css-table .col:nth-child(even) {
background: #ccc;
}
#css-table .col:nth-child(odd) {
background: #eee;
}

Category:javascript Views:2 Time:2018-08-08

Related post

  • Borders and equal height css columns 2011-02-08

    I have code like this <div class="container"> <div class="section"> <div class="left"> a profile pic and some text </div> <div class="right"> a wider div with much more text and some bio info </div> </div> i

  • Equal height fluid columns with min height 2012-04-03

    I'm trying to make two columns — sidebar and content. Minimum height of each column should be height of viewport. I don't know which column will be taller Left column width should be 25%, or at least be changeable by media queries. (black border is b

  • How to set equal heights to a div layout with jQuery and Disqus commenting system 2011-10-14

    I have a layout that's based on div's, and uses jQuery and a "setEqualHeights" function (below) to make all the columns in my layout equal. Equal Heights jQuery: function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { cur

  • Don't understand jquery - setting equal height contained divs 2009-09-22

    I am trying to set two side-by-side divs contained by a single larger div to equal column height. I am trying to use the following jquery script: <script type="text/javascript" language="javascript"> function pageLoad() { $(document).ready(func

  • Problem setting equal heights with jQuery in IE 2009-07-09

    I have several of the same class of element on a page and am attempting to get them all to be the same height even though the content within varies slightly. I've put together a small function that yields results in both Firefox 2+ and Safari 3+ but

  • 3 Column CSS Equal Height jQuery solution 2010-09-02

    Hey, I was working on a solution to my equal height three columns CSS equal height layout with jQuery, because the CSS workarounds were really giving me some trouble. I came up with the following code: $('.columns').css("height", "$('#detail').height

  • CSS / XHTML: Left floating DIVs with equal heights when height is set to 100% 2011-02-06

    I have a few floating div elements that are floating left. They all have a height of 100%. One of the divs exceeds the height of the view port and the other DIVs do not resize to 100% of the parent DIV which has a position of relative set (which is h

  • JQuery Equal Height Columns / Rows with one DIV-Class 2014-08-05

    How can i make equal height rows with one DIV-Class without adress all Column-Classes but rather the row with the 4-Line-Text in the first row ? Here is my example and the problem http://jsfiddle.net/8mh4s/1/ $('.container').each(function() { var hig

  • Easy equal height DIVs without JavaScript possible? 2010-09-01

    I've worked mostly with table-based layouts up to this point, but since it's considered a no-go thing of the past now I've taken on the task of learning DIV-based layouting. One of the most annoying challenges so far for me has been figuring out a wa

  • How to make http://deco.gs/ cells in a specific row equal height? 2011-03-11

    I like the http://deco.gs/ CSS grid system. I would like to make cells in one of rows in my actual layout equal height. Does anyone have an idea how to achieve it? I went through many articles on how to do equal height boxes/columns but I could not f

  • When doing equal height columns in CSS, is there a way to get internal anchor links to still function correctly? 2009-05-05

    I've used the last example on this page for equal height columns. http://www.ejeliot.com/blog/61 The problem is, when you click an internal anchor link, the content is shifted up, and the overflow is making the top part of the page disappear. For exa

  • help creating equal height columns on website with CSS 2009-12-17

    I have a website I'm working on that I should have perfected the layout on FIRST. But I am now faced with the issue of the columns not going all the way to the bottom. I have read the tutorials on how to get the 3 column layout in CSS from another pe

  • Columns of Equal Height with JQuery 2010-03-01

    Can we put JQuery to use to create columns of equal height? If yes, how? Thanks --------------Solutions------------- Cycle through each column, and find the tallest. Then set all to that height. var maxHeight = 0; $(".column").each(function(){ maxHei

  • I have a bunch of divs floated left, lined up in columns with different heights. They dont create a nice grid without setting a height.. JS or CSS way around it? 2010-03-29

    Hey guys, I am trying to create a grid like system with div's with content floated left. The problem is that the height of each div is not static since the content is different in each one. Since the height is different.. things get outta whack if on

  • Equal Height Columns with Cross-Browser CSS 2010-05-12

    I want to have divs of the same height. http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks does not work for be because my divs have a border, and the method described assumes, that they have not. A jQuery solution I c

  • trying to get equal height columns but div after the columns does not work 2010-10-05

    Example page I'm working on I used technique mentioned on this page: Basically I have a container and inside the container I have col1 and col2. I want col1 and col2 to be same height. this all works fine soon as I change: <div id="container1">

  • Making two column divs equal height 2011-02-28

    <div id="content"> <div id="leftColumn"> left column stuff </div> <div id="rightColumn"> right column sidebar stuff </div> </div> When the left column is longer than the right, the right column's background image g

  • achieving equal height columns in a responsive / flexible layout 2011-05-18

    I'm trying to achieve equal height columns on a 'responsive' website. That means I'm using media queries to provide several layouts for one website depending on the size of the device and window. I have 2 columns which need to have the same height. I

  • CSS Equal Height Columns - Ugh! Again? 2011-08-08

    Right, worst question in the history of web design. Who cares, just choose an option. So my question is like this... What is the best answer to be standards compliant and (backwards) browser compatible? jQuery used for layout which is supposed to be

  • How to make rounded corners on equal height columns 2011-08-11

    I need to make three equal height columns with varying amounts of content with rounded corners. the corners need an 8px border radius. I would prefer to accomplish this with pure CSS if possible. Right now my html looks like this: <div class="col-

  • How to Make the Content 100% height and equal height columns in this layout? 2012-02-06

    I have this layout where the my_menu is fixed at the top, followed by header, followed by content with 960px and centered, in which 3 columns have been floated left and finally followed by a sticky footer. The problem is How to make the content stret

  • Publisher 2013: Tables: Distribute rows/columns evenly; set row height 2015-03-08

    I cannot find a way to distribute the columns or rows in a Publisher table. Microsoft Word has its own button for the task, but in Publisher, where preciseness is very important in a printed piece, there seems to be no PRECISE way to do this. One can

  • CSS - Equal Height Columns? 2010-01-22

    In CSS, I can do something like this: But I've no idea how to change that to something like: Is this possible with CSS? If yes, how can I do it without explicitly specifying the height (let the content grow)? --------------Solutions------------- Flex

  • Problem using equal height columns & jQuery Accordian 2010-04-15

    I'm using this plugin http://www.cssnewbie.com/equalheights-jquery-plugin/ to give me equal column heights so that I can stick a div to the bottom of a righthand side sidebar. It's working fine, however in some of my pages I am using a jQuery accordi

  • A best-practice way to set the height of selects and inputs to be equal 2010-06-11

    By default selects have smaller heights compared to inputs (text fields). Is there a best-practice way to set the height of selects and inputs with the same font-size equal to each other? --------------Solutions------------- That is good question bec

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.152 (s). 11 q(s)