CSS Layout How to - Make the parent wide enough to hold two child in the same line








Question

We would like to know how to make the parent wide enough to hold two child in the same line.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.header {<!--   www.j  a  v a  2 s .c o  m-->
  width: 1500px;
  height: 100px;
  border: 1px solid;
  margin: 50px;
  text-align: center;
}

.block {
  width: 1500px;
  height: 300px;
  margin: 80px 80px 80px 50px;
  overflow: visible;
}

.block1 {
  width: 950px;
  height: 100%;
  border: 1px solid;
  margin-right: 80px;
  font-size: 12pt;
  text-align: left;
  float: left;
}

.block2 {
  width: auto;
  height: 100%;
  border: 1px solid;
  overflow: hidden;
  font-size: 9pt;
}
</style>
</head>
<body>
  <div class="header">Header (36pt)</div>
  <div class="block">
    <div class="block1">Block1 (12pt)</div>
    <div class="block2">Block2 (9pt)</div>
  </div>
</body>
</html>
</body>
</html>

The code above is rendered as follows: