asked on

Three Column Layout in iPadd

I am using the code below for most of my websites. However, on an iPad, the website does not display properly (sorry, I don't have an image / description right now) but I was hoping that someone might be able to see what needs to be changed.

I am not against to going to a two column layout for my sites (on an iPad). I know I am using a fixed width, so I am guessing that might be one issue. I usually build for 1280X800 pixels, but now the iPad has switched those two numbers.

You can see an example of the code: http://www.milehighmerchantaccounts.com/

/* Base Reset & Fonts
------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
th, td {vertical-align:top;}
fieldset, img {border:0;}
abbr,acronym {border:0;}
body {font:13px Arial,Helvetica,clean,sans-serif;}
table {font-size:inherit;}
select,input,textarea {font:99% Arial,Helvetica,clean,sans-serif;}
pre,code {font:115% monospace;}
body * {line-height:1.22em;}
label {cursor:pointer;}
address,caption,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
q:before,q:after {content:'';}


/* Main Structure - DO NOT CHANGE THIS SECTION!!
------------------------------------------------- */
html, body {height:100%;}
#wrap {min-height:100%;margin:0 auto;position:relative;overflow:auto;}
#pri, #sec, #ter {float:left;}
#pri {width:100%;}
#sec {position:relative;left:-100%;}
#ft {clear:both;position:relative;}
.grid-2 .col, .grid-4 .grid-2 {float:right;display:inline;}
.grid-2 div.first, .grid-4 div.first, .grid-3 .col {float:left;}
.grid-2 .col, .grid-4 .grid-2, .grid-4 .grid-2 .col {width:50%;}
.grid-3 .col {width:33%;}
body#onecol #sec, body#onecol #ter, body#twocol-left #ter, body#twocol-right #sec {display:none;}
body#onecol #pri .pad {margin:0;}
body#twocol-left #pri .pad {margin-right:0;}
body#twocol-right #pri .pad {margin-left:0;}


/* Widths & Footer height
------------------------------------------------- */
#wrap {width:1220px;}

#pri .pad {
margin:0px 275px 0px 265px;
padding:8px;
background-color: #b8bcc7;
}

#sec {
width:249px;
padding:8px;
margin-right:-265px;
background-color:#b2c4db;
}

#ter {
width:259px;
padding:8px;
margin-left:-275px;
background-color:#b2c4db;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#pri .pad, #sec, #ter {padding-bottom:56px;}

#ft {
width:1220px;
padding:8px;
margin:-40px auto 0;
font-size: .8em;
text-align:center;
background-color:#b2c4db;
}


/* General fonts
------------------------------------------------- */

/* A handy pixel to percent font conversion */
/*
10px / 77%
11px / 85%
12px / 92%
13px / 100%
14px / 107%
15px / 114%
16px / 122%
17px / 129%
18px / 136%
19px / 144%
20px / 152%
21px / 159%
22px / 167%
23px / 174%
24px / 182%
25px / 189%
26px / 197%
*/

/* 
	+++ VERY IMPORTANT+++
		The default font for these templates is 13px Arial, set on the <body> element.
		NEVER set a font-size or font-family on the <body> element.
		ALWAYS override using a child of <body>, with the pixel-equivalent percentage value for the font size, as documented above.
		
		EG: #pagewrap p {font-family:Verdana,Arial,Helvetica,sans-serif;}
		would set every <p> within #pagewrap to Verdana.
		It is better to set font-sizes on elements rather than containers.
*/

#wrap, #ft {font-family:Verdana, Arial, Helvetica, sans-serif;}
h1 {font-size:136%;}
h2 {font-size:107%; color:#00477F;}
h3 {font-size:100%; color:#00477F;}
h4 {font-size:98%; color:#00477F;}
h5 {font-size:96%; color:#00477F;}
h6 {font-size:94%; color:#00477F;}
#pri p, #sec p, #ter p, #ter h2, #sec li, #pri th, #pri td, #pri caption, #pri dt, #pri dd, #nav li {font-size:92%;}
#utilitynav li, #nav li, #ft p, #ft li, #searchform input, #searchform label, #ter h3, #ter li {font-size:85%;}
#ft p, #ft li {font-size:77%;}
#sec li li, #pri legend, #nav li li {font-size:100%;}
strong, b, h2, h3, h4, h5, h6, #pri legend {font-weight:bold;}
em,i,cite {font-style:italic;}


/* Theme
------------------------------------------------- */
html, body {
color:#000;
background-color:#b2c4db;
}

a {color:#008dbc;}
a:hover {color:#000;}
a.skip {position:absolute;left:-9999px;}

#wrap, #ft {background:#b2c4db;}

#masthead {
color:#00477F;
background:#b2c4db;
position:relative;
margin: 0px auto;
padding: 5px 0px 5px 15px;
height: 126px;
}
.pad h1
{
	color:#00477F;
	letter-spacing: 3px;
	text-align:left;
	margin: 1px 0px 5px 3px;
}
.pad h2
{
	letter-spacing:2px;
}
.pad h3
{
	letter-spacing:1px;
}


#pri p, #pri table {
margin: 0px 0px 5px 0px;
line-height:1.33em;
}

#sec a {
text-decoration:none;
color:#000;
}

#sec a:hover {text-decoration:underline;}

#ter p {margin-bottom:1em;}

#ter ul {
list-style:disc;
padding-left:1.5em;
}

#pri ul
{
	list-style-type: disc;
	list-style-image: none;
	list-style-position: inside;
	margin: auto;
	padding: 0em 0em 0em 1.5em;
}
#pri ul ul
{
	list-style-type: circle;
	list-style-image: none;
	list-style-position: inside;
	margin: auto;
	padding: 0em 0em 0em 1.5em;
}


#ft {
background:#b2c4db;
color:#000;
}

#ft p {padding:0 0 0.5em 2em;}

#ft ul#ftnav {
position:absolute;
right:1em;
}

#ft li {display:inline;}

#ft li a {
display:block;
float:right;
border-right:1px solid #000;
padding:0 0.8em;
color:#000;
text-decoration:none;
line-height:1em;
}

#ft li a:hover {text-decoration:underline;}

#ft li:last-child a, #ft li.lastchild a {
border-right:0;
margin-right:0;
padding-right:0;
}

/*.pad h2, .pad h3, .pad h4, .pad h5
{
	margin: 0px;
}*/
*/
h6.date-header
{
	font-weight:bold;
	font-size: .8em;
	font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	margin-top: 0px;
	margin-bottom: .5em;
}

/* left navigation
------------------------------------------------- */

#wrap .sidenav a {
	padding-left: 10px;
	list-style:none;
	background-image: url(/images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	padding-bottom: .4em;
	color: #415892;
	text-decoration: none;
	display: block;
	font-weight: normal;
}
#wrap .sidenav a:visited,active {
	padding-left: 10px;
	list-style:none;
	background-image: url(/images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	color: #415892;
	text-decoration: none;
	display: block;
	font-weight: normal;
}
#wrap .sidenav a:hover {
	padding-left: 10px;
	list-style:none;
	background-image: url(/images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	color: red;
	text-decoration: none;
	display: block;
	font-weight: normal;
}
#sec h5
{
	padding: 0px;
	color:#439948;
}



/* Rounded corner box styles
------------------------------------------------- */

.rounded {
background:#f1f1f1;
padding:10px;
}


/* Shadowbox styles
------------------------------------------------- */
#shadowbox_container, #shadowbox_overlay {
top:0;
left:0;
height:100%;
width:100%;
margin:0;
padding:0;
}

#shadowbox_container {
position:fixed;
display:block;
visibility:hidden;
z-index:999;
text-align:center;
}

#shadowbox_overlay {
position:absolute;
background-image:url(cssimages/shadowbox/overlay.png);
background-repeat:repeat;
}

#shadowbox {
position:relative;
margin:0 auto;
text-align:left;
}

#shadowbox_body {
position:relative;
margin:0;
padding:0;
border:1px solid #fff;
overflow:hidden;
}

#shadowbox_body_inner {
position:relative;
height:100%;
}

#shadowbox_content.html {
height:100%;
overflow:auto;
}

#shadowbox_loading {
position:absolute;
top:0;
width:100%;
height:100%;
}

#shadowbox_body, #shadowbox_loading {
background-color:#060606;
}

#shadowbox_loading_indicator {
float:left;
margin:10px 10px 0 10px;
height:32px;
width:32px;
background-image:url(cssimages/shadowbox/loading.gif);
background-repeat:no-repeat;
}

#shadowbox_loading span {
font-family:'Lucida Grande', Tahoma, sans-serif;
font-size:10px;
float:left;
margin-top:16px;
}

#shadowbox_loading span a:link, #shadowbox_loading span a:visited {
color:#fff;
text-decoration:underline;
}

#shadowbox_title, #shadowbox_info {
position:relative;
margin:0;
padding:0;
overflow:hidden;
}

#shadowbox_title_inner, #shadowbox_info_inner {
position:relative;
font-family:'Lucida Grande', Tahoma, sans-serif;
line-height:16px;
}

#shadowbox_title {
height:26px;
}

#shadowbox_title_inner {
font-size:16px;
padding:5px 0;
color:#fff;
}

#shadowbox_info {
height:20px;
}

#shadowbox_info_inner {
font-size:12px;
color:#fff;
}

#shadowbox_nav {
float:right;
height:16px;
padding:2px 0;
width:45%;
}

#shadowbox_nav a {
display:block;
float:right;
height:16px;
width:16px;
margin-left:3px;
cursor:pointer;
}

#shadowbox_nav_close {
background-image:url(cssimages/shadowbox/close.png);
background-repeat:no-repeat;
}

#shadowbox_nav_next {
background-image:url(cssimages/shadowbox/next.png);
background-repeat:no-repeat;
}

#shadowbox_nav_previous {
background-image:url(cssimages/shadowbox/previous.png);
background-repeat:no-repeat;
}

#shadowbox_nav_play {
background-image:url(cssimages/shadowbox/play.png);
background-repeat:no-repeat;
}

#shadowbox_nav_pause {
background-image:url(cssimages/shadowbox/pause.png);
background-repeat:no-repeat;
}

#shadowbox_counter {
float:left;
padding:2px 0;
width:45%;
}

#shadowbox_counter a {
padding:0 4px 0 0;
text-decoration:none;
cursor:pointer;
color:#fff;
}

#shadowbox_counter a.shadowbox_counter_current {
text-decoration:underline;
}

div.shadowbox_clear {
clear:both;
}

div.shadowbox_message {
font-family:'Lucida Grande', Tahoma, sans-serif;
font-size:12px;
padding:10px;
text-align:center;
}

div.shadowbox_message a:link, div.shadowbox_message a:visited {
color:#fff;
text-decoration:underline;
}


/* Clearfix
------------------------------------------------- */
.grid-2:after, .grid-3:after, .grid-4:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

Open in new window

ASKER CERTIFIED SOLUTION

Amick

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

coreybryant

ASKER

Landscape / portrait - that was what I was trying to remember.

I looked at the website on the iPad just now. It was OK for the most part. I remember just a few years ago how we were talking about designing / developing sites for a higher resolution than 800X600. It almost seems like we went back to the dark ages :)

I'll think about maybe doing a fluid / two column layout maybe later.

Thanks again!