2

I'm building a responsive webpage and have set all outer wrappers (inlcuding body) to 100% width. The problem is that some elements 100% width is going outside the wrappers?

Please, take a look on this page : http://test.ufeed.se/

Size your browser to under 1000 px width. scroll down a bit and then use the horizontal scroll. You will see that some of the elements are outside the wrapper, why?

Do I maybe have to remove px from 100% width like this :

width: calc(100% - 16px);

to remove paddings (that takes extra space)?

Rahul Shah
  • 1,387
  • 4
  • 22
  • 41
Banshee
  • 15,376
  • 38
  • 128
  • 219
  • possible duplicate of [width: 100%-padding?](http://stackoverflow.com/questions/5219175/width-100-padding) – Quentin Apr 14 '13 at 17:44
  • 1
    the best answer depends on what browser versions you need to support. Specifically, IE7? IE8? IE9? Older versions of other browsers? (`calc` is a fairly new feature, so won't be in older browsers) – Spudley Apr 14 '13 at 17:45

4 Answers4

3

padding makes elements bigger if you are not using box-sizing: border-box

monkeyinsight
  • 4,719
  • 1
  • 20
  • 28
2

Its because of the box model. Basically the width is set to 100% and then the margin, borders and padding add on to that pushing content outside of where you want it.

Yes you can remove the padding and that should resolve the problem, but as block level elements automatically take up the full width available you should just be able to remove the width and it will work as intended.

You can also use box-sizing: border-box; which tells the browser to include padding within the width calculation.

Without actually looking at your code I think these are the best solutions to your problem. If you want more specific help replicate the problem in a jsFiddle.

James Coyle
  • 9,922
  • 1
  • 40
  • 48
1

Learn about width: auto and the difference between width:auto and width:100%

If a container already has a width and you're thinking about setting a width of 100% on a descendant then NOPE what you really need is auto ;) Whatever the padding, border and box model, the result will be the same and what you intended.

* { box-sizing: border-box } and its prefixes (and boxsizing.htc polyfill for IE6-7 if needed) is also neat but it has huge consequences on your layout. I mean, it's a choice you've to make for your whole project. width: auto is useful in more particular situations.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • This seems to be the best solution, use Width auto as far as possible and sometimes use the box-sizing when nedded. – Banshee Apr 14 '13 at 18:43
0

i think this width element should be a %px element

.postContainer .createdDateCon {
 width: 150px;
}
tcgumus
  • 328
  • 3
  • 8