StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
622003
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2009-03-07T15:36:00.620
FavoriteCount
0
LastActivityDate
2009-03-07T15:41:51.603
LastEditDate
2009-03-07T15:41:51.603
LastEditorUserId
69083
OwnerUserId
69083
ParentId
621945
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
Guffa
text
Body
<p>Use position:relative on the header (as has already been suggested) so that it becomes a layer, then the absolutely positioned elements inside it will use that element as origin.</p> <p>You can place the line before the logo in the markup, then you don't need to use z-index to put the logo on top of the line. All browsers doesn't handle z-index the same...</p> <p>By placing the title to the right, it will expand to the left as needed.</p> <p>Use a top border instead of a bottom border on the line, that elliminates the problem with IE wanting to make the element at least one character high.</p> <p>I removed some unneccesary styles, and added a title to the page (as that is required in a proper html document).</p> <p>This will display consistently in Firefox 3, IE 7, IE 8, Opera 9 and Chrome 1:</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://data.w3.org/1999/xhtml"> <head> <title>Title</title> <style type="text/css"> body { margin: 0; padding: 10px; } #headerArea { position: relative; background: yellow; margin: 0 auto; width: 760px; height: 150px; } #headerArea div { position: absolute; } #logo { top: 20px; left: 20px; background: orange; text-align: center; font-size: 32pt; width: 150px; padding: 10px; } #menu { top: 20px; right: 20px; background: tomato; text-align: center; font-size: 14pt; width: 240px; padding: 10px; } #line { top: 80px; left: 20px; width: 720px; border-top: 1px solid blue; } #title { top: 90px; right: 20px; font-style: italic; font-size: 14pt; } </style> </head> <body> <div id="headerArea"> <div id="line"></div> <div id="logo">LOGO</div> <div id="menu">One Two Three Four Five</div> <div id="title">This is the Title a Bit Longer</div> </div> </body> </html> </code></pre> <p>(You may need to adjust the positioning to get it exactly as you want, but that should be quite easy.)</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POIs this the way to do absolute/relative/static CSS DIVs?
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USGuffa
UserOwnerUserId
1. USGuffa
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
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
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.