CSS : 100% Width + Padding issue in android devices

Question

on android the second div ( orange colored ) is shorter due to the previous div having a padding which probably makes first div..

100% + padding

http://jsfiddle.net/gz6kcgud/

<div style="width:100%;padding:20px;background-color:red;">in android this div is 100% + padding </div>

<div style="width:100%;background-color:orange;">and thus this div is shortened by android browser</div>

android obviously sees the first div as

100% + padding

that is why the second div shrinks when android shrinks it all together

( the whole web site is shrunk by android but due to first div being considered 100% + padding.. everything else gets shrunk also )

Then use percent padding or use `box-sizing: border-box;` – drip Sep 03 '14 at 08:19 — drip, Sep 03 '14 at 08:19

score 0 · Accepted Answer · answered Sep 03 '14 at 08:22

That's wrong ... The first div is actually expanding beyond the 100% width and the second one is actually 100%. It's visible in desktop browsers too.

You need to use a property called box-sizing that changes how the calculations of width/height is being done. Take a look at this.

For more information about this topic, read more about the Box model

CSS : 100% Width + Padding issue in android devices

1 Answers1