title: Positioning objects on the XHTML page
body: <p>I am creating Web user interface for a Web application. The interface has header, footer and in between two rectangles in horizontal line. Rectangles are separated by space. All these features are created using  tags.
   Below is given CSS to format the left rectangle:</p>
  
  <pre><code>#sidebar1 {    
      position: absolute; 
      left: 150px;
      width: 450px;          
      height:250px;
      background: #EBEBEB; 
      padding: 20px 0; 
          padding-left:20px;
          padding-right:20px;
      margin: 50px auto;
          border: 1px solid #000000;
  
  }
  </code></pre>
  
  <p>The problem is that when you squeeze or extend the window of browser those rectangles change position or overlap one another. This is not acceptable.
  I have tried other options of position keyword in CSS such as position: fixed or position:relative or static but the representation is still wrong. Likewise I tried float:left and float: right but that still makes the rectangles to move and overlap. I want those rectangles to stand still despite that you are extending or squeezing the window.
  What are your solutions, please?
  Best regards<img src="https://i.stack.imgur.com/GgS7G.png" alt="enter image description here"></p>
  
  <p>Current code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Welcome to Spring Web MVC project&lt;/title&gt;
      &lt;style type="text/css"&gt; 
  
  
  body {
      font: 100% Verdana, Arial, Helvetica, sans-serif;   
      margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
      /*padding: 0;
      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
      color: black;
  } 
  
   #header { 
      background: green;         
        /*  top: 100px; */
          text-align: center;
      margin: 55px;        
      padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
  } 
  
  
  #sidebar1 {    
      position: absolute;         
          left: 150px;
      width: 450px; /* since this element is floated, a width must be given */
      height:250px;
      background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
      padding: 20px 0; /* top and bottom padding create visual space within this div */
          padding-left:20px;
          padding-right:20px;
      margin: 50px auto;
          border: 1px solid #000000;
  
  }
   #sidebar2 {
      position: absolute;        
          right: 150px;
      width: 450px; /* since this element is floated, a width must be given */
      height: 250px;
      background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
      padding: 20px 0; /* top and bottom padding create visual space within this div */
          padding-left:20px;
          padding-right:20px;
      margin: 50px auto;
          border: 1px solid #000000;
  
  }
  
  
  
  
   #footer { 
      padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
      background:green;
          width:95%;
          margin:55px;
          position: relative;
          bottom: -300px;;
  
  } 
  
  .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
      clear:both;
      height:0px;
      font-size: 1px;
      line-height: 0px;
  }
  
  
  &lt;/style&gt;&lt;!--[if IE]&gt;
  &lt;style type="text/css"&gt; 
  /* place css fixes for all versions of IE in this conditional comment */
  .thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
  .thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
  /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
  &lt;/style&gt;
  &lt;![endif]--&gt;&lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="header"&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
    &lt;!-- end #header --&gt;&lt;/div&gt;
  &lt;!--&lt;div id="container"&gt; --&gt;
  
   &lt;div id="sidebar1"&gt;
      &lt;h3&gt;blah blah&lt;/h3&gt;
      &lt;p&gt;&lt;li&gt;blah blah&lt;/li&gt; &lt;/p&gt;
      &lt;p&gt;&lt;li&gt;blah blah&lt;/li&gt; &lt;/p&gt;
      &lt;p&gt;&lt;li&gt;blah blah&lt;/li&gt;&lt;/p&gt;
    &lt;!-- end #sidebar1 --&gt;&lt;/div&gt; 
  
   &lt;div id="sidebar2"&gt;
      &lt;h3&gt;blah blah&lt;/h3&gt;
      &lt;p&gt;&lt;li&gt;blah blah&lt;/li&gt; &lt;/p&gt;
      &lt;p&gt;&lt;li&gt;blah blah &lt;/li&gt;&lt;/p&gt;
      &lt;p&gt;&lt;li&gt;blah blah&lt;/li&gt;&lt;/p&gt;
    &lt;!-- end #sidebar2 --&gt;&lt;/div&gt;
    &lt;p&gt;
      &lt;!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --&gt;
    &lt;/p&gt;
  
  
    &lt;p&gt;&lt;br class="clearfloat" /&gt;
    &lt;/p&gt;
    &lt;div id="footer"&gt;
      &lt;p&gt;Footer&lt;/p&gt;
      &lt;p&gt;Terms &amp; Conditions&lt;/p&gt;
  
    &lt;!-- end #footer --&gt;&lt;/div&gt;
  &lt;!-- end #container --&gt; &lt;!--&lt;/div&gt; --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>