StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAligning text and select boxes to the same width in CSS?
primarykey
Id
10001291
data
AcceptedAnswerId
10001472
AnswerCount
7
ClosedDate
CommentCount
5
CommunityOwnedDate
CreationDate
2012-04-03T20:58:49.707
FavoriteCount
23
LastActivityDate
2015-07-20T17:03:03.470
LastEditDate
2012-07-29T22:18:18.067
LastEditorUserId
569447
OwnerUserId
569447
ParentId
0
PostTypeId
1
Score
79
ViewCount
53189
LastEditorDisplayName
text
Body
<p>Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right margin.</p> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css"> input, select { width: 200px; } </style> </head> <body> <input type="text" value="ABC"><br> <select> <option>123</option> </select> </body> </html> </code></pre> <p>That would do it you think, right? Nope. The select box is 6px shorter in Firefox. See screenshot. <img src="https://i.stack.imgur.com/pvIQi.png" alt="screenshot in firefox"></p> <p>Ok so lets edit the code and make two styles.</p> <pre><code><style type="text/css"> input { width: 200px; } select { width: 206px; } </style> </code></pre> <p>Ok that works!</p> <p><img src="https://i.stack.imgur.com/ij6Sv.png" alt="Fixed in Firefox"></p> <p>Oh wait, better test in Chrome...</p> <p><img src="https://i.stack.imgur.com/jpolD.png" alt="chrome screenshot"></p> <p><img src="https://i.stack.imgur.com/R1BrW.png" alt="FFFFFFFUUUUUUUUUUUU"></p> <p>Can someone tell me how to line these up in all browsers? Why can't I just do width: 200px on all, why do all the browsers display it differently? Also while we're at it why is the text box and select box different heights? How do we get them to the same height? Have tried height and line-height no no avail.</p> <hr> <h2>Solution:</h2> <p>Ok I've found the solution with some help from the answers below. The key is to use the <strong>box-sizing: border-box</strong> property so when you specify the width that <em>includes</em> the border and padding. See <a href="http://www.reddit.com/r/webdev/comments/s8u0p/wow_this_speced_behavior_was_the_source_of_so/c4c6cuy" rel="noreferrer">excellent explanation here</a>. Then the browser can't stuff it up.</p> <p>Code is below, have also set the height of the boxes to the same size and indented the text inside the box so it lines up. You also need to set the border as Chrome has a really weird looking border it uses for select boxes which will throw out the alignment. This will work for HTML5 sites (e.g. supporting IE9, Firefox, Chrome, Safari, Opera etc).</p> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css"> input, select { width: 200px; border: 1px solid #000; padding: 0; margin: 0; height: 22px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } input { text-indent: 4px; } </style> </head> <body> <input type="text" value="ABC"><br> <select> <option>123</option> <option>123456789 123123123123</option> <option>123456789 123123123123 134213721381212</option> </select> </body> </html> </code></pre> <p>Just one final warning you may not want input buttons, checkboxes etc to be included in this styling so use the <code>input:not([type='button'])</code> to not apply it to certain types or use <code>input[type='text'], input[type='password']</code> to specify ones you do want it to apply to.</p>
Tags
<html><css><html5><textbox><drop-down-menu>
Title
Aligning text and select boxes to the same width in CSS?
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USzuallauz
UserOwnerUserId
1. USzuallauz
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
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
  POAligning text and select boxes to the same width in CSS?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  POAligning text and select boxes to the same width in CSS?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  POAligning text and select boxes to the same width in CSS?
  UserUserId
  USMadara Uchiha
  VoteTypeVoteTypeId
  VTFavorite
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.