Equalize the Height of Left and Right Div, Prevent Right Div from Going Below Left Div

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Left Div and Right Div should be Equal in Height..!

Try this code

Remove float:left;

As like this code

#base {
    height: 100%;
    width:100%;
    display: table;
}
#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
   vertical-align:top;
}
#rightright {
    display: table-cell;
  vertical-align:top;
}
#footer{
    display:table-row;
    width:100%;background:red;
}

Demo

Matching the height of left divs to right divs with jquery

I've created a JS Fiddle for you.

You could get the height of the left column on load and set it on the right column using jQuery .height(). Just wrap the div's with class .height in a div with class .height-wrapper and you should be good to go.

$(window).on('load', function () {

  target = $('.height-wrapper').height();
  $('.rightcolumn').height(target);

});

css - How do I make the height of two right divs equal the height of the left divs

Only way I can see this working without JS is to set heights for all the elements

HTML

<div class="wrapper">
    <div class="left">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="right">
        <div class="one"></div>
    </div>
</div>

CSS

.left {
    width : 50%;
    height : 1000px;
    background : rgba(0,0,200,0.1);
    float : left;
}

.right {
    width : 50%;
    height : 1000px;
    background : rgba(200,0,0,0.1);
    float : right;
}

.left div {
    margin : auto;
    margin-top : 20px;
    width : 90%;
    height : 100px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

.right .one {
    margin : 20px auto;
    width : 90%;
    height : 344px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

Check out this Fiddle

How do I make right div height equal to dynamically sized left div?

To use overflow: hidden; the container would need a defined height, otherwise it doesn't know where the overflow begin. Since you want to have a dynamic image (with different heights) I'm afraid you have to use javascript.

HTML/CSS: Making two floating divs the same height

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

#container {  overflow: hidden;      width: 100%;}#left-col {  float: left;  width: 50%;  background-color: orange;  padding-bottom: 500em;  margin-bottom: -500em;}#right-col {  float: left;  width: 50%;  margin-right: -1px; /* Thank you IE */  border-left: 1px solid black;  background-color: red;  padding-bottom: 500em;  margin-bottom: -500em;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>  <div id="container">    <div id="left-col">      <p>Test content</p>      <p>longer</p>    </div>    <div id="right-col">      <p>Test content</p>    </div>  </div></body>

Increase container's height to the hightest element when with float: left, and float: right

What all you need is to have a display: inline-block; or overflow: hidden; property in the container. Check this JSFiddle

<div id="m">
    <div class="a">a<br>c</div>
    <div class="b">b</div>
</div>

#m{
    background-color: gray;
    width: 100%;
    overflow: hidden;
}

.a{
    float: left;
}

.a{
    float: right;
}

CSS: two floating div columns with equal height, with vertically split right div

I have CSS solution, as JS is not do-able..

Example: here

all "columns" are inline blocks forced not to wrap, that way you can vertically align them all, then the 3rd "column" (bottom right) is slotted into place via a negative margin

left and right col same height after dynamically inserted content

demo

   #main {
        display: table;
        width: 500px;
    }
    #left, #right {
        display: table-cell;
        padding: 5px;
    }
    #left {
        background: none repeat scroll 0 0 red;
        width: 250px;
    }
    #right {
        background: none repeat scroll 0 0 green;
    }