Page Widget How to - Create Border Layout

Question

We would like to know how to create Border Layout.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from  ww  w. j  a v a2 s .co  m-->
  border: 1px solid #d3d3e3
}

#north {
  margin: 0;
  padding: 1em;
}

#south {
  margin: 0;
  padding: 1em;
}

#east {
  margin: 0;
  padding: 1em;
  width: 6em;
  height: 22em;
  float: left;
  margin-right: 1.1em
}

#west {
  margin: 0;
  padding: 1em;
  width: 6em;
  height: 22em;
  float: right;
  margin-left: 1.1em
}

#center {
  margin: 0;
  padding: 1em;
  padding-bottom: 0em;
}

#center:after {
  content: ' ';
  clear: both;
  display: block;
  height: 0;
  overflow: hidden
}
</style>
</head>
<body>
  <div id="north">North</div>
  <div id="east">East</div>
  <div id="west">West</div>
  <div id="center">Center</div>
  <div id="south">South</div>
</body>
</html>

The code above is rendered as follows: