asked on

Adding More Pixels to My CSS Three Column Layout

I have a three column layout that still seems to be working - I tested it in IE8, IE9, Firefox, Opera, Chrome, Flock, Maxthon).

Right now, the width is 1220 pixels. I woulld like to increase this to 1270 pixels and also pass down this 50 pixel increase to the columns. Maybe 15 pixels for the left / right colum (sec / ter). and 40 pixels to the center column #pri .pad - I think).

If there are any updates that might help, that would be appreciated as well. Thank you!

/* Base Reset & Fonts
------------------------------------------------- */
body,div,dl,dt,dd,ul,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;}
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:#ddecef;
}

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

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

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

#ft {
width:1220px;
height:24px;
padding:8px;
margin:-40px auto 0;
}
div#sitemap h2 a
{
	text-decoration:none;
	color: #000;
}


/* 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%; padding-top:1em;}
h3 {font-size:100%; padding-top:1em;}
h4 {font-size:92%; padding-top:1em;}
h5 {font-size:92%; padding-top:1em;}
h6 {font-size:92%;}
#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 {
background:#bfd9da;
color:#000;
}

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

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

#masthead {
color:#439948;
background:#ddecef;
position:relative;
margin: 0px auto;
padding: 5px 0px 5px 15px;
}
#masthead h1
{
	color:#439948;
	letter-spacing: .2em;
	text-align:center;
}

#pri p, #pri table {
margin: 5px 0px 10px 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;
}

#ft {
background:#ddecef;
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: .1em;
	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;
	padding-bottom: .1em;
	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;
	padding-bottom: .1em;
	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

David S.

Firstly, 15+15+40 is 70, not 50. Secondly, we can only guess about which changes to make without having seen the markup that this stylesheet is used with.

Here I've increased the width of the two smaller columns by 10px each:

#wrap { width: 1270px;}

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

#sec {
	width: 259px;
	padding: 8px;
	margin-right: -275px;
	background-color: #bfd9da;
}

#ter {
	width: 269px;
	padding: 8px;
	margin-left: -285px;
	background-color: #bfd9da;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

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

#ft {
	width: 1270px;
	height: 24px;
	padding: 8px;
	margin: -40px auto 0;
}

Open in new window

coreybryant

ASKER

Sorry, so 15 for the columns on the side and 20 for the middle. http://www.mymerchantaccountblog.com/ is where it is being used

ASKER CERTIFIED SOLUTION

David S.

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

Thanks - sorry I thought I closed this one already.