StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS percentage width resize based on window
primarykey
Id
17665610
data
AcceptedAnswerId
17861343
AnswerCount
2
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-07-15T23:27:22.803
FavoriteCount
0
LastActivityDate
2013-07-25T14:46:33.370
LastEditDate
2013-07-15T23:43:18.340
LastEditorUserId
2277855
OwnerUserId
2277855
ParentId
0
PostTypeId
1
Score
3
ViewCount
4507
LastEditorDisplayName
text
Body
This probably was answered somewhere, but I can't find it :s My question is about dynamic resizing of divs based in percentages. Please look at code example below for the examples and possible solutions I made. I ask if there is a better way to do resizing? More detailed explanation: Say I am writing a plugin that people can insert in their pages. (Imagine login form). I go ahead and design the plugin's divs. I use media queries to achieve desired look for different devices. I work on a div straight inside of a 'body' element. I use percentages for design (I like percentages). Say I set div to 80% width. Now I give this plugin to the user. User goes ahead and puts the plugin's div inside of another div that is 100px in width. Now everything looks awful. (80% of 100px is not a lot [80px]). And of course I want user to put my plugin inside of whatever small-width divs that he have. The solutions I saw so far to this problem was to create a holder div of certain width - say hardcode 300px. (ex - jQuery UI's Datepicker div; Meteor's login widget div). And then code to it always knowing the 300px width that I set before is not going to change. But I don't know how good of a solution this is. Moreover if I decide to go with hard-coding width, my plugin would need width of ~ 1000px. Because I want div to resize with media queries. And if I go with hard-coding width (say holder div of 1000px width) and put it on a page, the page will have horizontal scrolling. And you cannot simply hide holder div (parent div) and have child to show at the same time. So this requires setting position:relative for holder (parent) div, putting it outside of window, and use same for child div - position:relative with same offset in opposite direction of parent offset. I hope I am being clear so far and have not confused you! A code example to illustrate what I am talking about: <a href="http://jsbin.com/ifawez/18/edit" rel="nofollow">http://jsbin.com/ifawez/18/edit</a>
Tags
<css><resize><media-queries>
Title
CSS percentage width resize based on window
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USPlyto
UserOwnerUserId
1. USPlyto
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
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POCSS percentage width resize based on window
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 POCSS percentage width resize based on window
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

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.