Percentage based columns float off page on iPad

HTML & CSS
1

Hi guys, sorry for the really nooby question but am trying to make a site specifically for iPad and i’m having trouble.

The page renders successfully in either landscape or portrait orientations, but then when I rotate from landscape to portrait, the page moves off the left hand side of the screen. (if anyone has the iOS SDK simulator or an ipad could you confirm this)

Code I’m using:

<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Attempted Grid</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="stylesheet" href="fonts/TypoSlabserifLightRegular/stylesheet.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<article>
<header>
	<h1>Page Header</h1>
</header>
<section>
	<div class="leftBig">This content goes on the left and is big</div>
	<div class="rightSmall">This content goes on the right and is small</div>
	<div class="rightSmall">This content goes on the right and is small</div>
</section>
</article>
</body>
</html>

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	-webkit-text-size-adjust: none;
	font-family: sans-serif
}
article {
	width: 100%;
}
header {
	background-color:#3ff;
}
header h1 {
	padding: 5px 2%;
	font-family: "TypoSlabserifLightRegular", Times;
	font-size: 36px;
	text-align: right;
}
section {
	width: 100%;
	padding: 5px 2%;
}
.leftBig {
	width: 79%;
	margin-right:2%;
	margin-bottom: 5px;
	height: 350px;
	background-color:#f33;
	float: left;
}
.rightSmall {
	width: 15%;
	height: 170px;
	margin-bottom:10px;
	background-color:#3f3;
	float: left;
}
2

Hi Welcome to Sitepoint :slight_smile:

Nothing is bigger than 100% and I guess its this rule here that breaks the ipad.


section {
	width: 100%;
	padding: 5px 2%;
}

That’s 4% too wide for the screen. Change it to this and see what happens.


section {
	width: 96%;
	padding: 5px 2%;
}
3

Seems to work when I use margin instead of padding and reduce the width. I thought you defined the width of the box and then the padding stopped the content from reaching the edge of the box, hm

4

In the normal box model the space an element takes up is comprised of its width, padding, borders and margins.

The space available to an element is 100%.

Therefore if width + padding + borders + margins add up to more than 100% then something’s got to give because it won’t fit.

For example an element with 600px width and 20px padding will stretch across 640px (600 + 20 + 20). Padding, borders and margins are additive to the width.

padding is the space inside the border-edge of the element and margin is how far it is away from other elements. Sometimes padding and margins will perceive to have the same effect in creating space but they are totally different concepts.