Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>One of the great things about web development is that most often, when you see a site and think "How did they do that", it's very easy to look at the code and find out, and also to test it out - tools like <a href="http://getfirebug.com" rel="nofollow noreferrer">Firebug</a> for Firefox, the Developer Tools in IE 8 (F12) and Chrome will all display nicely formatted source and CSS, and will let you modify it in situ.</p> <p>In the case of SO, the main body of the site is contained in a div with class of "container", the style rules for "container" are:</p> <pre><code>.container { margin: 0 auto; text-align: left; width: 950px; } </code></pre> <p>The key thing we're looking at here is that this class has a <strong>fixed</strong> width - 950 pixels, and the margins are set to (expanded):</p> <pre><code>margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; </code></pre> <p>Setting the left and right margins to "auto" has the affect of centering the div within the edges of it's container, and allowing them to expand to whatever width is needed once the container has taken up the required 950px.</p> <p>Inside the container div, you then have a div with id "content" (no style rules), and then two divs: "mainbar" and "sidebar" whose styles are:</p> <pre><code>#mainbar { float: left; margin-bottom: 40px; width: 715px; } #sidebar { float: right; width: 220px; /* this is also set in the "style" attribute * } </code></pre> <p>These left and right floats are what's positioning the bars in the right places.</p> <p>Another handy CSS rule is:</p> <pre><code>clear </code></pre> <p>this can be set to "both", "left" or "right", and will basically reset the floats on the containers.</p> <p>However, it sounds like you're after what is often called the "<a href="http://www.alistapart.com/articles/holygrail" rel="nofollow noreferrer">Holy Grail of CSS</a>" (Rick points out that there's a bug in this with IE7, see <a href="http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7" rel="nofollow noreferrer">here for a fix</a>) for good reason: Three Columns, with at least one of them flexible.</p> <p>Other examples, of completely flexible layouts include:</p> <ul> <li><a href="http://www.alistapart.com/articles/multicolumnlayouts" rel="nofollow noreferrer">Multi-column layouts climb out of the box</a></li> <li><a href="http://www.alistapart.com/articles/fluidgrids" rel="nofollow noreferrer">Fluid grids</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POWhat is the mechanism that keeps various sections on page from being repositioned when browser resizes
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USZhaph - Ben Duguid
    1. USZhaph - Ben Duguid
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POWhat is the mechanism that keeps various sections on page from being repositioned when browser resizes
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI used the article Holy Grail of CSS and updated my site and it worked well. But there was a problem with IE7/8 which Gerd Riesselmann posted a fix http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7. His fix worked well.
      singulars
      1. PO
      1. USRick
    2. COThanks for letting me know I'll add that to the answer :)
      singulars
      1. PO
      1. USZhaph - Ben Duguid
 

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