Equalize the height of left and right div, prevent right div from going below left div

Solution 1:

fLoat one element, set margin to the other one.

.leftPart {
    border: 1px solid blue;
    width: 200px;
    float: left;
    background-color: red;
}

.rightPart {
    margin-left: 200px;
    border: 1px solid orange;
    background-color: beige;
}

JSBin Demo

Update #1

If you consider using JavaScript, you might want to take a look at equalize.js.

equalize.js is a jQuery plugin for equalizing the height or width of HTML elements.

Here is an example:

// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});

Here is the JSBin Demo.

Update #2

If you're looking for a pure CSS solution, you can use display: table-cell; CSS declaration.

But, honestly, I'd prefer using JavaScript rather than this, because using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table):

#body { display: table; width: 100%; }

.myContent { display: table-row; }

.leftPart {
  width: 200px;
  display: table-cell;
}

.rightPart {
  display: table-cell;
}

Here is the JSBin Demo