Databases
StackOverflow2013
Postsdbo
POPositioning objects on the XHTML page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPositioning objects on the XHTML page
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload