Can I stop 100% Width Text Boxes from extending beyond their containers?

by

Is there any way to make a text box fill the width of its container without expanding beyond it?

Yes: by using the CSS3 property ‘box-sizing: border-box’, you can redefine what ‘width’ means to include the external padding and border.

Unfortunately because it’s CSS3, support isn’t very mature, and as the spec process isn’t finished yet, it has different temporary names in browsers in the meantime. So:

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

The old-school alternative is simply to put a quantity of ‘padding-right’ on the enclosing <div> or <td> element equal to about how much extra left-and-right padding/border in ‘px’ you think browsers will give the input. (Typically 6px for IE<8.)

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. Set width on div
  3. How to Make columns in row [closed]
  4. How to add images in select list?
  5. Is it wrong to change a block element to inline with CSS if it contains another block element?
  6. How to position text over an image with CSS
  7. CSS selector by inline style attribute
  8. :last-child not working as expected?
  9. Why is my Grid element’s height not being calculated correctly?
  10. Horizontal list items
  11. HTML/CSS – Best practice for preserving white space on certain elements?
  12. Creating a CSS3 box-shadow on all sides but one
  13. Weird effect when applying transparent border over an element with a gradient background
  14. Why does CSS work with fake elements?
  15. padding is not working in Safari and IE in select list
  16. Deploying just HTML, CSS webpage to Tomcat
  17. Loading an external font via inline CSS
  18. Center form submit buttons HTML / CSS
  19. Center align container and left align child elements
  20. CSS object-fit: contain; is keeping original image width in layout
  21. Remove scrollbar from iframe
  22. Flexbox on IE11: image stretched for no reason?
  23. CSS animate custom properties/variables
  24. How to see an HTML page on Github as a normal rendered HTML page to see preview in browser, without downloading?
  25. Firefox 30 is not hiding select box arrows anymore
  26. Font Awesome & Unicode
  27. How to make one span both columns in a two column table?
  28. What is the difference between phrasing content and flow content?
  29. CSS crop string in the middle
  30. What does “semantically correct” mean?

Leave a Comment