Bootstrap need two columns to be same height

I have a template that works on several pages:

https://dev2.magickitchen.com/menu/meal_packages/7622.html
https://dev2.magickitchen.com/menu/meal_packages/7618.html
https://dev2.magickitchen.com/menu/meal_packages/7627.html

I'd like the left and right columns to be forced to the same height. I'll upload the template here. There are short descriptions and long descriptions, so I can't just give them both the same height in css. I've tried several solutions online, but either they didn't work or I didn't understand them. Can you help? Thanks.
mk_prod_bundle_2_col_page.txt
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
Thanks!! I'll check it out.
0
mel200Author Commented:
OK.. So here's what I have: <div class="row"><div class="row-lg-height row-md-height">

and on the two columns which I want to be the same height in large and medium windows,
<div class="col-md-12 col-sm-12 col-lg-height col-md-height" style="padding-right:10px;padding-left:10px;padding-bottom:15px;border:thin solid;">

Then in a style tag at the top of the page:
.row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }

.col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }

  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }

But I don't see it working on http://dev2.magickitchen.com/menu/meal_packages/7622.html. What do you think I am doing wrong? Thanks.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Slick812Commented:
greetings mel200, , I have tried to use CSS to have side by side <div> an equal height, and I could not do it that worked AND was responsive. (you can set the height to the same  321px, , and equal shows, BUT it is NOT responsive)

About the only way to get this is to use javascript , NOT CSS, in the link that Marco Gasi gave you it says -
    "There is no real css solution to have "columns content" with the same height"

You try and use the CSS for table settings as -
.col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }

but this can NOT WORK, unless you have a truer "TABLE" structure for the aligned <div> using the  .col-md-height , , BUT if you use a truer "TABLE" structure, then it can NOT drop from two columns, to two different rows in a responsive pattern change.
If you can not do the javascript your self, then use a plug-in
0
mel200Author Commented:
Slick 812, I thought that might be the problem. This is a big problem, I wish there was an easy fix.

Would you be able to point me to a javascript plugin that would do the job? Thanks.
0
Slick812Commented:
? ?
I was just trying to get you to understand some, ,
BUT  Marco Gasi , has already given you a bootstrap plugin Link, just scroll up this page to that comment, ,

I feel it would be better to get an OVER ALL assessment of that page, look at the "Customer Feedback" placement, That is not good, , might just place a horizontal bar (even just a <hr>) between the two columns for "Meals for One (8 Meals) #1 & #2" and the "Customer Feedback", have the "Customer Feedback" be centered on the page NOT to the right, as it is now.

Personally , I do not think any of your users will even ever notice that the columns are Not the same (height), they don't care, what they want is the services (or informations) you have as as a provider of "Delicious Prepared Meals Delivered", that are on an EASY TO USE, and EASY TO UNDERSTAND web site, ,
0
mel200Author Commented:
OK, this is not helping, sorry. I need to concentrate on those two columns be equal height. I can look at  the rest of the page later, this is a process. But for now, I used the link Marco gave me, and it is not working. I need to understand why it is not working. :)
0
Slick812Commented:
I do not have time today for much info, , you have to much html as <div> and other, to use the CSS methods in the examples there, because Your Number and Arrangement of the many, many divs  u have in your page does not fit into the design there, their's is -
  <div class="row">
    <div class="row-height">
      <div class="col-xs-12 col-sm-6 col-sm-height">
        <div class="inside inside-full-height">
          <div class="content"><br><br><br><br><br><br><br></div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 col-sm-height col-sm-top">
        <div class="inside inside-full-height">
          <div class="content"></div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-2 col-sm-height col-sm-middle">
        <div class="inside inside-full-height">
          <div class="content"></div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-1 col-sm-height col-sm-bottom">
        <div class="inside inside-full-height">
          <div class="content"></div>
        </div>
      </div>
     </div>
  </div>

Open in new window

where each column is a simple -
   <div class="col-xs-12 col-sm-6 col-sm-height">
        <div class="inside inside-full-height">
          <div class="content"><br><br><br><br><br><br><br></div>
        </div>
      </div>

sorry but , I would think this would take time to un tangle the many HTML elements you have and see what the problem is. Sorry I tried to help, without having the time today
0
mel200Author Commented:
Thanks- That's a good point, so I tried this. I took all the other divs out, and only have the row with the columns, but still it doesn't work: http://dev2.magickitchen.com/test-columns.html
0
Marco GasiFreelancerCommented:
You forgot the 'inside' element. In addition, the inner col-lg-12 is superflous. Try this (I have slightly simplified your markup just to show you the correct way):
<div class="row">
  <div class="row-lg-height row-md-height">
    <div class="col-md-6 col-height" style="padding-left:10px;padding-right:10px;padding-bottom:15px;border:thin solid;">
			<div class="inside">
				<p class="BodyBoldGreen"><mim>header7</mim></p>
        <mim>
          ...
        </mim>        
			</div>
    </div>
  </div>
  <div class="row-lg-height row-md-height">
    <div class="col-md-6 col-height" style="padding-left:10px;padding-right:10px;padding-bottom:15px;border:thin solid;">
			<div class="inside">
				<p class="BodyBoldGreen"><mim>header7</mim></p>
        <mim>
          ...
        </mim>        
			</div>
    </div>
  </div>
</div>

Open in new window

0
mel200Author Commented:
Thanks!
0
Marco GasiFreelancerCommented:
Hope it works for you :-)
0
mel200Author Commented:
I'm not sure how that will work for me. Maybe I am going about this wrong. I need something that looks like this, attached.
Untitled-1.jpg
0
mel200Author Commented:
Hi, I went back to my old template for those pages. Eventually I will sit down with your solution and work it out properly, but for now I will award you the points. Thanks.
0
mel200Author Commented:
thanks.
0
Marco GasiFreelancerCommented:
Thank you for points. I'll do some test to see if I get a result as the one you want :-)
0
Marco GasiFreelancerCommented:
Hi, Melany (I suppose).
Please, take a look at this raw experiment and try to resize the browser down to mobile width: http://www.webintenerife.com/testing_script/columns.html

Here I attach the whole page and the columns.css:

test page:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>mel200 test</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="css/columns.css" type="text/css">
    <style>
      .BodyBoldRed{
        background: #F10B0D;
      }
      .BodyBoldGreen{
        background: #F3811E;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="row-lg-height row-md-height">
          <div class="col-md-6 col-height" style="padding-left:10px;padding-right:10px;padding-bottom:15px;border:thin solid;">
            <div class="inside">
              <p class="BodyBoldRed"><mim>header7</mim></p>
              <mim>
                Meals for One (8 Meals) #1 :
                <br>
                Meals
                <ul>
                  <li>Chicken Marsala, Broccoli & Cauliflower with Cheese Sauce </li>
                  <li>Beef Stew, Magic Mashed Potatoes</li>
                  <li>Mama's Beef Lasagna, Verdura Gourmet Artisan Flatbread with Kalamata Olives (RC)</li>
                  <li>Deep-dish Chicken Pot Pie (RC)</li>
                  <li>Chicken Marsala, Rice with Mixed Vegetables</li>
                  <li>Beef Stew, Buttered Carrots</li>
                  <li>Mama's Beef Lasagna, Verdura Gourmet Artisan Flatbread with Kalamata Olives (RC)</li>
                  <li>Deep-dish Chicken Pot Pie (RC)</li>
                </ul>
                Desserts:
                <ul>
                  <li>Double Fudge Brownie (2 servings)</li>
                  <li>Pucker Up Lemon Loaf (2 servings)</li>
                </ul>
                <strong>*Note: Some items in this bundle require cooking in the oven. Those are marked with an (RC). </strong>
              </mim>        
            </div>
          </div>
          <div class="col-md-6 col-height" style="padding-left:10px;padding-right:10px;padding-bottom:15px;border:thin solid;">
            <div class="inside">
              <p class="BodyBoldGreen"><mim>header7</mim></p>
              <mim>
                Meals:
                <ul>
                  <li>Chicken Parmigiana, Rosemary Potatoes</li>
                  <li>Beef Pot Roast with Mushroom Gravy, Fresh Cut Corn Medley</li>
                  <li>Portabella/Shiitake Mushroom Ravioli, French Bread</li>
                  <li>Beef Chile con Carne, Stuffed Baked Potato (RC)</li>
                  <li>Chicken Parmigiana, Creamy Spinach</li>
                  <li>Portabella/Shiitake Mushroom Ravioli, French Bread</li>
                  <li>Beef Pot Roast with Mushroom Gravy, Rice Pilaf</li>
                  <li>Beef Chile con Carne, Stuffed Baked Potato (RC)</li>
                </ul>
                Desserts:
                <ul>
                  <li>Chocolate Ganache Cake (2 servings)</li>
                  <li>Dutch Apple Pie (RC) (2 servings)</li>
                </ul>
                <strong>*Note: Some items in this bundle require cooking in the oven. Those are marked with an (RC). </strong>
              </mim>        
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Open in new window


columns.css
.row-centered {
  text-align: center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.col-centered-centered {
	text-align: center;
}

.inside {
  margin-top: 20px;
  margin-bottom: 20px;
/*  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
  background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
  background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);*/
}
.inside-full-height {
  /*
  // if you want to give content full height give him height: 100%;
  // with content full height you can't apply margins to the content
  // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
  */
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

/* columns of same height styles */

.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}

@media (min-width: 320px) {
	.col-height{
		float: left;
		width: 100%;
	}
}
@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
	.col-height{
		float: none;
	}
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}

Open in new window

0
Marco GasiFreelancerCommented:
Oh, you're form Mexico, so your name isn't probably Melany! Hasta luego, chica :-)
0
mel200Author Commented:
:) Thanks for doing that extra work! I am from Mexico, but originally from Canada. It's Melody, good guess!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.