Databases
StackOverflow2013
Postsdbo
PO2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
    primarykey
    data
    text
    <p>Consider the following 2 cols html structure:</p> <pre><code>&lt;div id="container"&gt; &lt;div class="left"&gt;some text&lt;/div&gt; &lt;div class="right"&gt;some text&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#container { overflow: hidden; } .left { float: left; width: 200px; background: red; } .right { overflow: hidden; background: green; } </code></pre> <p>The same code in jsFiddle - <a href="http://jsfiddle.net/vny2H/" rel="nofollow">http://jsfiddle.net/vny2H/</a></p> <p>So we have 2 columns. The left column width is fixed, the width of the right one is liquid. If we remove the left column from html, the right column stretches to 100% of parent #container width.</p> <p>The question is: can we change the order of the left and right columns? (I need it for SEO)</p> <pre><code>&lt;div id="container"&gt; &lt;div class="right"&gt;&lt;/div&gt; &lt;div class="left"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Thanks.</p> <hr> <h2>Added</h2> <p>There's one interesting method to reach what I want, but fixed column becomes not removable. The method is based on negative margin. <a href="http://jsfiddle.net/YsZNG/" rel="nofollow">http://jsfiddle.net/YsZNG/</a></p> <p>HTML</p> <pre><code>&lt;div id="container"&gt; &lt;div id="mainCol"&gt; &lt;div class="inner"&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;/div&gt;&lt;!-- .inner end --&gt; &lt;/div&gt;&lt;!-- .mainCol end --&gt; &lt;div id="sideCol"&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;/div&gt;&lt;!-- .sideCol end --&gt; &lt;/div&gt;&lt;!-- #container end --&gt; </code></pre> <p>CSS</p> <pre><code>#container { overflow: hidden; width: 100%; } #mainCol { float: right; width: 100%; margin: 0 0 0 -200px; } #mainCol .inner { margin: 0 0 0 200px; background: #F63; } #sideCol { float: left; width: 200px; background: #FCF; } </code></pre> <p>So we have 2 ways:</p> <ol> <li>Using "float" for the fixed column and "overflow: hidden" for the liquid. Fixed column becomes removable. But liquid one goes second in code.</li> <li>Using negative margin. Liquid column goes first in code. But fixed one is not removable.</li> </ol> <p>Is there a third way, when fixed column is removable and liquid one is the first in code?</p> <hr> <h2>Added</h2> <p>Half-decision has been suggested by @lnrbob. The main idea - using table-like divs. <a href="http://jsfiddle.net/UmbBF/1/" rel="nofollow">http://jsfiddle.net/UmbBF/1/</a></p> <p>HTML</p> <pre><code>&lt;div id="container"&gt; &lt;div class="right"&gt;some text&lt;/div&gt; &lt;div class="left"&gt;some text&lt;/div&gt; &lt;/div&gt; </code></pre> <p>СSS</p> <pre><code>#container { display: table; width: 100%; } .right { display: table-cell; background: green; } .left { display: table-cell; width: 200px; background: red; } </code></pre> <p>This method is suitable, when a fixed column is placed to the right in a site. But if we need it to the left - it seems to be impossible to do this.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USWebars
    1. USWebars
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PO2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
      1. This table or related slice is empty.
      1. VTUpMod
    1. COi man not sure if this is what you need but this is new and wont work on legacy browsers. http://www.quirksmode.org/css/multicolumn.html
      singulars
      1. PO2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
      1. USAchshar
    2. COThis is a fantastic thing, but it seems to be a modification of just one block. So it doesn't suit for a site column structure.
      singulars
      1. PO2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
      1. USWebars
    3. COwell after all a 'site column structure' would itself be inside a div or body. i believe it is specifically made for site structure. and it will be better baked into the browser hence will be more reliable :) it is alot easier than managing floating divs and all :D i use it and it took me about 5 minutes to understand and implement it
      singulars
      1. PO2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code
      1. USAchshar
 

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