Databases
StackOverflow2013
Postsdbo
POPosition Absolute: Negative Values
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPosition Absolute: Negative Values
    primarykey
    data
    text
    <p>I am attempting to create a page that has four <code>div</code> containers that are each 100% width and 100% height. I want there to be a main <code>div</code> in the middle, and then one to its left, right, and bottom (yes they must be positioned like this for the sake of jQuery animations). </p> <p>The following is my current code (and here is a <a href="http://jsfiddle.net/MitulP91/P2rjV/" rel="nofollow">JSFiddle</a>):</p> <p><strong>HTML</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" href="stylesheets/test.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container1"&gt;&lt;/div&gt; &lt;div id="container2"&gt;&lt;/div&gt; &lt;div id="container3"&gt;&lt;/div&gt; &lt;div id="container4"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>html, body { height: 100%; width: 100%; margin: 0; padding: 0; /*overflow: hidden;*/ } #container1 { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: blue; } #container2 { position: absolute; height: 100%; width: 100%; top: 0; left: -100%; background-color: red; } #container3 { position: absolute; height: 100%; width: 100%; top: 0; left: 100%; background-color: green; } #container4 { position: absolute; height: 100%; width: 100%; top: 100%; left: 0; background-color: orange; } </code></pre> <p>I had no issue with the <code>div</code>s that are to the right and underneath, but I can't seem to get the one to the left working.</p> <p>I was also trying to position the left <code>div</code> at <code>left: 0</code> and <code>top: 0</code> with the main div at <code>left: 100%</code> and <code>top: 0</code>, but I am unsure of how to get the page to load viewing the main <code>div</code> (the blue one). An example of this is at <a href="http://jsfiddle.net/MitulP91/zGzLM/" rel="nofollow">this JSFiddle</a>.</p> <p>Any ideas?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMitulP91
    1. USMitulP91
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPosition Absolute: Negative Values
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIt's a little hard to understand what you want to do. This isn't correct I assume http://jsfiddle.net/P2rjV/10/
      singulars
      1. POPosition Absolute: Negative Values
      1. USCyclonecode
    2. COI would suggest you to use z-index for this purpose!! You need not specify any position attributes just try giving the z-index and in jQuery animations you can change $("#ID").css({z-index:"maxvalue"});
      singulars
      1. POPosition Absolute: Negative Values
      1. USVignesh Subramanian
    3. CO@KristerAndersson I apologize if I was unclear. I actually want that orange `div` to be to the left of the blue `div`. I did this in the second fiddle that is posted, but I want the page to load to the blue `div`.
      singulars
      1. POPosition Absolute: Negative Values
      1. USMitulP91
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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