CSS: Width in percentage and Borders

by

Use the box-sizing: border-box property. It modifies the behaviour of the box model to treat padding and border as part of the total width of the element (not margins, however). This means that the set width or height of the element includes dimensions set for the padding and border. In your case, that would mean the element’s width and it’s border’s width would consume 30% of the available space.

CSS box model

Support for it isn’t perfect, however vendor prefixes will catch most if not all modern browsers:

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

More information can be found on the MDN and Quirksmode.

According to Quirksmode, using the 3 vendor prefixes above (-moz-, -webkit- and -ms-), you get support for all browsers, even IE8.

More Related Contents:

  1. What is a clearfix?
  2. How to center an element horizontally and vertically
  3. How do you keep parents of floated elements from collapsing? [duplicate]
  4. How can I expand floated child div’s height to parent’s height?
  5. Fixed Table Cell Width
  6. Transform: translate(-50%, -50%)
  7. Position absolute and overflow hidden
  8. Get rid of space underneath inline-block image [duplicate]
  9. Difference between position:sticky and position:fixed?
  10. Can a span be closed using ?
  11. Printing HTML table with many columns/rows using CSS layout?
  12. Can overflow:hidden affect layout?
  13. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  14. CSS Layout 2-Column fixed-fluid [closed]
  15. Yet Another Divs vs Tables issue: Forms
  16. Balanced text wrapping in HTML
  17. CSS margin pushing the body element
  18. Is it bad design to use table tags when displaying forms in html?
  19. Make column bigger – CSS code [closed]
  20. How to center a flex container but left-align flex items
  21. Change select box option background color
  22. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  23. Tables instead of DIVs [duplicate]
  24. Is type=”text/css” necessary in a tag?
  25. Text overflow ellipsis on two lines
  26. How can I make a link from a table cell
  27. How can I make a TextArea 100% width without overflowing when padding is present in CSS?
  28. How can I make a 45 degree responsive ribbon with folded corner?
  29. Border with a transparent centred arrow
  30. Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?

Leave a Comment