StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFloating Dynamic Multi-Line List Items into Two Columns
primarykey
Id
4963342
data
AcceptedAnswerId
4963558
AnswerCount
4
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2011-02-10T22:12:02.227
FavoriteCount
0
LastActivityDate
2014-02-06T19:29:11.110
LastEditDate
2012-04-09T18:17:51.577
LastEditorUserId
106224
OwnerUserId
480603
ParentId
0
PostTypeId
1
Score
3
ViewCount
1702
LastEditorDisplayName
text
Body
I have a dynamic list that I need to lineup nicely into 2 columns using CSS and I'm having a terrible time with it. The markup similar to this: <pre><code><ul> <li>A is for apples</li> <li>B is for bananas which are yellow in color</li? <li>C is for cupcakes</li> .... </ul> </code></pre> When I simply give the li's a width and float them to the left they are clearing funny and end up formatted similar to this: <pre><code>A is for apples B is for bananas which are yellow in color C is for cupcakes D is for dirtbag </code></pre> I need the formatting to get the 3rd li directly under the first li - no matter the height of any one of the list items like this: <pre><code>A is for apples B is for bananas which C is for cupcake are yellow in color D is for dirtbag </code></pre> Each li's text is being pulled from a database and I have no control over how long each is. Clarification Update - The list may also come out of the database like so: <pre><code><ul> <li>A is for apples that grow on trees</li> <li>B is for boat</li> <li>C is for cupcakes</li> <li>D is for dishes - that sure don't wash themselves</li> .... </ul> </code></pre> Requiring the formatting: <pre><code>A is for apples that B is for boat grow on trees C is for cupcake D is for dishes - E is..... that sure don't wash themselves </code></pre> /clarification My backup plan: The order is not particularly relevant so I have tried to split the list in half and print out the two columns in 2 separate <code><ul></code>'s that floats left with a defined width but with each <code><li></code>having a variable height and the database returning between 2-15 items, using that method the bottom of the columns don't consistently look even. I'd just rather find a better option if possible :/
Tags
<css>
Title
Floating Dynamic Multi-Line List Items into Two Columns
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USBoltClock
UserOwnerUserId
1. USTerri Ann
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. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
3. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POFloating Dynamic Multi-Line List Items into Two Columns
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 POFloating Dynamic Multi-Line List Items into Two Columns
 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.