Is it possible to align the height of two floated divs so that the second div slips down, and the container width automatically adjusts to fit the child width while centering the divs? I apologize for any language errors. :(
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.container{
text-align:center;
display:block;
background-color:grey;
}
.left {
background-color:#EFF5FB;
width: 510px;
float: left;
min-height:50px;
}
.right {
float: left;
width: calc(100% - 520px);
width: -webkit-calc(100% - 520px);
width: -moz-calc(100% - 520px);
width: -o-calc (100% - 520px);
min-width:510px;
background-color: #00f;
height:100%;
//min-height:50px; (edited)
}
.clear{clear:both;}
</style>
</head>
<body>
<div class="container">
<div class="left"><p>paragraph 1</p><p>paragraph 2</p></div>
<div class="right"><p>paragraph 1</p></div>
<div class="clear"></div>
</div>
</body>
</html>
[Here is the visual representation of what I would like to achieve] https://i.sstatic.net/56gwt.jpg
http://jsfiddle.net/SpSjL/3268/ (edited again!)