SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Percentage based columns float off page on iPad

    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:
    HTML Code:
    <!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 Code:
    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint

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

    Code:
    section {
    	width: 100%;
    	padding: 5px 2%;
    }
    That's 4% too wide for the screen. Change it to this and see what happens.

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

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mattIsaNoob View Post
    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
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •