StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
14469043
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-01-22T22:13:38.067
FavoriteCount
0
LastActivityDate
2013-01-22T22:13:38.067
LastEditDate
LastEditorUserId
0
OwnerUserId
1331470
ParentId
14351883
PostTypeId
2
Score
2
ViewCount
0
LastEditorDisplayName
text
Body
There are a few things to mention here but I'll start with the reason for the gap in between the two sections. From what I can see from your inline styles you have used <code>position: relative</code> and varying <code>top</code> and<code>left</code> values to achieve the desired layout. On the element with ID <code>personnelContainer</code> you have added <code>top: -230px</code>. This is what is causing the gap. When you position an element relatively you have to imagine that the element is in its original position and that you've just visually moved it. In other words, moving the element does not change the flow of the page, so applying the negative top value as in your example will not change the height of the container. (good reference: <a href="http://reference.sitepoint.com/css/relativepositioning" rel="nofollow">http://reference.sitepoint.com/css/relativepositioning</a>) With this in mind, you could go the route of applying minus <code>top</code> values to each of the sections that follow in order to close the gap, however you are likely to find that this complicates matters further and leads to overlapping content. The best advice I can give is to read the following articles on floated layouts: <a href="http://css-tricks.com/all-about-floats/" rel="nofollow">http://css-tricks.com/all-about-floats/</a> <a href="http://www.quirksmode.org/css/clearing.html" rel="nofollow">http://www.quirksmode.org/css/clearing.html</a> Relative positioning has its applications but in this case you should use the <code>float</code> property to achieve your layout. If you read the articles above it will give you a good grounding in floated layouts and how to ensure your sections contain everything correctly. As long as you don't set any fixed heights on any of the child elements you will find they expand to accommodate any amount of content.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POCSS & Nested Divs - Parent Div Won't Take Child Height, Overflow:auto not a good fix
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USChris Goodchild
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POCSS & Nested Divs - Parent Div Won't Take Child Height, Overflow:auto not a good fix
 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
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.