We would like to know how to align two inline table cell DIVs.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#wrap {<!-- w w w.ja v a2s . c o m-->
width: 100%;
height: 400px;
display: inline-table;
}
#lb {
width: 71.5%;
display: table-cell;
vertical-align: top;
background:#AAA;
}
#rb {
display: table-cell;
width: 28.5%;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
background:#EEE;
border-right: 1px #6A6A6A solid;
}
</style>
</head>
<body>
<div id="wrap">
<div id="lb">Content</div>
<div id="rb">Content</div>
</div>
</body>
</html>
The code above is rendered as follows: