box-sizing: border-box
is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here’s a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing
, etc.) are not needed in modern browsers.
Related Contents:
- How can I make a div not larger than its contents?
- Two divs side by side – Fluid display [duplicate]
- How to make a div fill a remaining horizontal space?
- Fluid width with equally spaced DIVs
- resizes wrong; appears to have unremovable `min-width: min-content`
- How to make div’s percentage width relative to parent div and not viewport
- Div width 100% minus fixed amount of pixels
- Width 100% with white borders around it. WHy?
- Make an image width 100% of parent div, but not bigger than its own width
- Responsive tables, the smart way
- How to remove the space between inline/inline-block elements?
- How to horizontally center an element
- Why don’t flex items shrink past content size?
- CSS: Width in percentage and Borders
- Why doesn’t nth-of-type/nth-child work on nested elements?
- How to modify the fill color of an SVG image when being served as background image?
- Why aren’t my absolutely/fixed-positioned elements located where I expect?
- What to use in place of ::ng-deep
- How to apply a style to an embedded SVG?
- Does opacity:0 have exactly the same effect as visibility:hidden
- Left column and stacked right column using flexbox CSS [duplicate]
- Li item on two lines. Second line has no margin
- How can I draw vertical text with CSS cross-browser?
- How to fallback to local stylesheet (not script) if CDN fails
- Colspan/Rowspan for elements whose display is set to table-cell
- Apply CSS styles to an element depending on its child elements [duplicate]
- Change cursor type on input type=”file” [duplicate]
- How to remove unwanted space between rows and columns in table?
- What is syntax for selector in CSS for next element?
- How to change the length/position of text-decoration:underline?
- Use CSS to remove the space between images [duplicate]
- How to make div occupy remaining height?
- How to apply CSS page-break to print a table with lots of rows?
- Hexagon shape with a border/outline
- Text not centered with justify-content: center
- Unskewing the ends of an assortment multiple skewed images
- Why doesn’t “display: block” & “width: auto” stretch a button to fill the container? [duplicate]
- grid-auto-flow in snake lines?
- Display text, a dotted line then more text spanning the width of the page [duplicate]
- Vertical (rotated) text in HTML table
- How can I make a 45 degree responsive ribbon with folded corner?
- How do I vertically align something inside a span tag?
- How to pass parameters to css classes
- Changing the highlight color when selecting text in an HTML text input
- CSS: image link, change on hover
- How to have two items on opposite sides on the same line
- Change color of one character in a text box HTML/CSS [duplicate]
- HTML5 Required input styling
- Can you have a within a ?
- how to use z-index with relative positioning?