StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
17159303
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-06-18T01:27:42.473
FavoriteCount
0
LastActivityDate
2013-06-18T01:27:42.473
LastEditDate
LastEditorUserId
0
OwnerUserId
564353
ParentId
17157058
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
<p>Here is one way of doing it by using CSS display types of <code>table</code> and <code>table-cell</code>.</p> <p>You need to make a small modification to your left and right child elements, simply define a wrapper <code>.content</code> div to enclose any content.</p> <p>The <strong>HTML</strong>:</p> <pre><code><div class="second_bar"> <div class="status_border left"> <div class="content"></div> </div> <div class="nav_bar"></div> <div class="status_border right"> <div class="content"></div> </div> </div> </code></pre> <p>and the <strong>CSS</strong>: </p> <pre><code>.second_bar { height:80px; width:100%; border: 1px dotted blue; display: table; } .status_border { display: table-cell; vertical-align: top; width: auto; background-color: yellow; } .status_border .content { width: auto; height: 14px; background-color: pink; } .nav_bar { display: table-cell; vertical-align: top; height: 80px; width: 980px; min-width: 980px; background-color: green; } </code></pre> <p>For your container block <code>.second_bar</code>, set the display type to <code>table</code> and the width to 100%.</p> <p>The child elements <code>.status_border</code> and <code>.nav_bar</code> have <code>display: table-cell</code> and <code>vertical-align: top</code>, but you may adjust that depending on your layout requirements.</p> <p>The <code>.nav_bar</code> child div has a width of 980px, but because it is a table cell, the width could shrink to less than 980px if the window is small enough. Table cell's will shrink to fit the content if needed. To maintain the full width, set the <code>min-width</code> to the width.</p> <p>To get your left and right status indicator bars to be 14px high, you need to have a separate block element with the left and right child elements.</p> <p>By default, the three <code>table-cell</code> blocks will take the height of the tallest of the three table cells, in this case, the 80px <code>.nav_bar</code> div.</p> <p>If you set <code>.content</code>'s width to auto, it will both will take on the same width and fill up the rest of the available page width.</p> <p>Note that <code>table-cell</code> is not supported in IE8, but otherwise, this is a pretty useful pattern.</p> <p>See demo fiddle at: <a href="http://jsfiddle.net/audetwebdesign/SyAAQ/" rel="nofollow">http://jsfiddle.net/audetwebdesign/SyAAQ/</a></p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. PODiv in the center with specific width, sides must scale with screen
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USMarc Audet
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. PODiv in the center with specific width, sides must scale with screen
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTAcceptedByOriginator
CommentsPostId
1. This table or related slice is empty.

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.