# CSS | How do I change the column width and background?



## Rollerr (May 4, 2005)

I was finally able to change my layout from 2-column to 3-column. But now the column widths are all up in the air and the background is out of sync.

How do I correct this?

*My blog is at:* Not Just Cricket

*The CSS code is:* As follows in the CodeBox

I would like to have the left and right sidebar widths at around 170.

The left column's left edge without any margin.

The right column's right edge without any margin.

The space between the (right edge of the left sidebar) and the (left edge of the central content column) to be around 16.

The space between the (left edge of the right sidebar) and the (right edge of the central content column) to be around 16.

If it might make things easier, I dont mind (for now) if the background color is a single flat color- white. Once the columns and backgrounds are set, I will try and do the color change.

_Any help will be very much appreciated._

 


```
/* basic page elements */

body
{
	font-family: 'trebuchet ms', times, serif;
	font-size: 11px;
}

a { color: #06C; text-decoration: underline; }
a:visited { color: #369; }
a:hover { color: #900; }

#banner a { color: #fff; text-decoration: none; }
#banner a:visited { color: #fff; }
#banner a:hover { color: #e4e4e4; }

.module-content a { color: #96c; font-weight: bold; }
.module-content a:visited { color: #bcaace; }
.module-content a:hover { color: #9c0; }

h1, h2, h3, h4, h5, h6
{
	font-family: 'trebuchet ms', times, serif;
}

.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header
{
	/* ie win (5, 5.5, 6) bugfix */
	p\osition: relative; 
	width: 100%;
	w\idth: auto;
	
	margin: 0 0 1px 0;
	padding: 5px 5px 5px 25px;
	color: #fff;
	background: #799de7 url(colitem-header-bg.gif) 0 50% repeat;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1;
}

.module-header a,
.module-header a:visited,
.trackbacks-header a,
.trackbacks-header a:visited,
.comments-header a,
.comments-header a:visited,
.comments-open-header a,
.comments-open-header a:visited
.archive-header a,
.archive-header a:visited
{
	color: #fff;
}

.module-header a:hover,
.trackbacks-header a:hover,
.comments-header a:hover,
.comments-open-header a:hover,
.archive-header a: hover
{
	color: #369;
}

.module-content a { color: #369; font-weight: bold;}
.module-content a:visited { color: #6e849a; }
.module-content a:hover { color: #900; }

.entry-more-link,
.entry-footer,
.comment-footer,
.trackback-footer,
.typelist-thumbnailed
{
	font-size: 10px;
}


/* page layout */

body
{
	min-width: 780px;
	color: #333;
	background: #e1e0e0 url(body-bg.gif) repeat;
}

#container
{
	width: 780px;
	background: transparent url(container-bg.gif) repeat-y;
}

#container-inner
{
	margin: 0 10px 0 10px;
	border-bottom: 1px solid #4A87B9;
	background: transparent url(column-right-bg.gif) -500px 0 repeat-y;
}

#banner
{
	width: 760px; /* necessary for ie win */
	border-bottom: 1px solid #000;
	background: #369 url(banner-bg.gif) repeat;
}

#banner-inner { padding: 20px; }

.banner-user
{
	width: 70px;
	margin-top: 4px;
	font-size: 10px;
	font-weight: normal;
}

.banner-user-photo { border: 3px double #fff; }

#banner-header
{
	margin: 0;
	color: #FFF;
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
}

#banner-description
{
	margin: 1px 0;
	color: #fff;
	background: none;
	font-size: 12px;
	line-height: 1.125;
}

#alpha { margin: 20px 0 20px 20px; width: 160px; }
#beta { margin: 20px 0 0 40px; width: 340px; }
#gamma, #delta { width: 160px; }

.date-header
{
	margin: 0;
	padding-bottom: 10px;
	color: #666;
	background: transparent url(date-header-bg.gif) repeat-x;
	font-size: 14px;
}

.entry-header
{
	margin: 10px 0;
	padding: 0 0 0 20px;
	color: #900;
	background: transparent url(entry-header-bg.gif) 0 0.2em no-repeat;
	font-size: 16px;
	font-weight: bold;
}

.entry-content { margin: 0; }
.entry-footer
{
	margin: 0 0 20px 0;
	border-top: 1px solid #eee;
	padding-top: 2px;
	color: #666;
	font-weight: normal;
}

.content-nav { padding-top: 0; }


/* modules */

.module-calendar .module-content { margin: 5px 0 15px 0; }

.module-mmt-calendar .module-content table,
.module-calendar .module-content table { font-size: 11px; }

.module-calendar .module-content table th { font-size: 10px; }

.module-mmt-calendar .module-header a { color: #900; }
.module-mmt-calendar .module-header a:visited { color: #900; }
.module-mmt-calendar .module-header a:hover { color: #069; }

.module-powered { margin: 20px 0; }
.module-powered .module-content
{
	margin: 0;
	padding: 10px;
	border: 1px solid #ccc;
	color: #333;
	background: #dcd8d8 url(powered-bg.gif) repeat-x;
}

.module-powered a { color: #369; }
.module-powered a:visited { color: #369; }
.module-powered a:hover { color: #900; }

.module-photo { background: none; }
.module-photo img { border: solid 1px #dce1e4; }

.module-list-item
{

	padding-left: 14px;
	background: url(li-bg.gif) 0 0.3em no-repeat;
	line-height: 150%;
}

.typelist-thumbnailed .module-list
{
	margin: 0;
}

.typelist-thumbnailed .module-list-item
{
	margin: 0 0 1px 0;
	padding: 0;
	border: 1px solid #d9dee1;
	background: #e5e5e5 url(typelist-thumbnailed-bg.gif) repeat-x;
}

.typelist-thumbnail { background: #fff; }

.module-featured-photo img
{
	width: 414px;
}


/* recent photos */

.module-recent-photos .module-content { margin: 6px 0 0 0; }

.module-recent-photos .module-list { margin: 0; }

.module-recent-photos .module-list-item
{
	width: 64px; /* mac ie fix */
	margin: 0 6px 6px 0;
	padding: 0;
	background: none;
}

.module-recent-photos .module-list-item a
{
	border: 1px solid #369;
	padding: 1px;
	background: #fff;
}

.module-recent-photos .module-list-item a:hover
{
	border-color: #900;
}


/* artistic tweaks */


/* calendar tweaks */
	
	.layout-calendar #beta { overflow: visible; }
	
	.module-mmt-calendar { width: 420px; }
		
	.module-mmt-calendar .module-header
	{
		margin: 0;
		border: 0;
		padding: 0;
		color: #999;
		background: none;
		font-size: 14px;
		font-weight: normal;
		text-align: right;
		text-transform: none;
	}
	
	.module-mmt-calendar table
	{
		margin-top: 6px;
		color: #fff;
		background: #bcc5cc;
	}
	
	.module-mmt-calendar th
	{
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 2px;
		background: #84a7ed;
		text-align: right;
		font-weight: normal;
	}
	
	.module-mmt-calendar td
	{
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 2px;
		background: #c3c3c3 url(calendar-td-bg.gif) repeat-x;
		text-align: right;
		font-weight: normal;
	}
	
	.module-mmt-calendar .weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42
	{
		border-right: none;
	}
	
	.day-photo a
	{
		border: solid 1px #369;
		padding: 1px;
		background: #fff;
	}
	
	.day-photo a:hover
	{
		border-color: #900;
	}


/* moblog1 tweaks */

	.layout-moblog1 #container-inner { background-position: -220px 0; }
	.layout-moblog1 #pagebody
	{
		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;
	}
	
	.layout-moblog1 #alpha { width: 200px; }
	
	.layout-moblog1 #beta
	{
		width: 320px;
		margin: 20px 0 20px 20px;
	}
	
	.layout-moblog1 #gamma
	{
		width: 160px;
		margin: 20px 0 20px 40px;
	}
	
	.layout-moblog1 .entry { margin-bottom: 40px; }
	
	.layout-moblog1 .module-recent-photos .module-content { margin: 6px 0 0 12px; }

	.layout-moblog1 .module-powered .module-content
	{
		margin-right: 20px;
	}

/* moblog2 tweaks */

	.layout-moblog2 #container-inner { background-position: -350px 0; }
	.layout-moblog2 #pagebody
	{
		background: transparent url(column-left-bg.gif) -690px 0 repeat-y;
	}
	.layout-moblog2 #pagebody-inner
	{
		background: transparent url(column-right-bg.gif) -160px 0 repeat-y;
	}
	
	.layout-moblog2 #alpha { width: 70px; }
	.layout-moblog2 #beta { width: 300px; margin: 0 0 0 40px; }
	.layout-moblog2 #gamma { width: 170px; margin: 0 0 0 40px; }
	
	.layout-moblog2 #delta
	{
		float: left;
		width: 100px;
		margin: 0 0 0 20px;
	}
	
	.layout-moblog2 .module-header,
	.layout-moblog2 .trackbacks-header,
	.layout-moblog2 .comments-header,
	.layout-moblog2 .comments-open-header,
	.layout-moblog2 .archive-header
	{
		margin: 20px 0 1px 0;
	}
	
	.layout-moblog2 .date-header { margin-top: 20px; }	

	.layout-moblog2 .content-nav { padding-top: 20px; }
	
	.layout-moblog2 .module-photo .module-content { margin: 0; }
	.layout-moblog2 .module-photo img { width: 80px; height: auto; }
	
	.layout-moblog2 .module-recent-photos .module-content
	{
		margin: 0;
		padding: 0;
		background: none;
	}
	
	.layout-moblog2 .module-recent-photos .module-list { margin: 0; }
	.layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 5px 0; }
	
	.layout-moblog2 .module-powered .module-content
	{
		margin-right: 20px;
	}
	

/* timeline tweaks */

	.layout-timeline #container-inner { background-position: -420px 0; }
	
	.layout-timeline #alpha { width: 340px; }
	.layout-timeline #beta { width: 360px; }
	
	.layout-timeline #gamma,
	.layout-timeline #delta
	{
		width: 170px;
	}
	
	.layout-timeline .module-recent-photos .module-content { padding: 0 0 10px 0; }
	.layout-timeline .module-recent-photos .module-list { margin: 7px 7px 0 0; }


/* one-column tweaks */

	.layout-one-column body
	{
		min-width: 620px;
	}
	
	.layout-one-column #container
	{
		width: 620px;
		background: transparent url(one-column-container-bg.gif) repeat-y;
	}
	
	.layout-one-column #container-inner
	{
		margin: 0 10px 0 10px;
		border-bottom: 1px solid #5b626a;
		background: transparent url(column-right-bg.gif) -500px 0 repeat-y;
	}
	
	.layout-one-column #banner
	{
		width: 594px; /* necessary for ie win */
	}
	
	.layout-one-column #container-inner { background: none; }
	.layout-one-column #alpha { width: 560px; }
	
	
/* two-column-left tweaks */

	.layout-two-column-left #container-inner { background: none; }

	.layout-two-column-left #pagebody
	{
		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;
	}
	
	.layout-two-column-left #alpha { width: 200px; }
	.layout-two-column-left #beta
	{
		width: 500px;
		margin: 20px 0 0 20px;
	}
	
	.layout-two-column-left .module-powered .module-content
	{
		margin-right: 20px;
	}


/* two-column-right tweaks */

	.layout-two-column-right #container-inner { background: none; }

	.layout-two-column-right #pagebody
	{
		background: transparent url(column-right-bg.gif) -270px 0 repeat-y;
	}
	
	.layout-two-column-right #container-inner { background: none; }
	.layout-two-column-right #alpha { width: 490px; }
	.layout-two-column-right #beta
	{
		width: 200px;
		margin: 20px 0 0 40px;
	}


/* three-column tweaks */
	
	.layout-three-column #container-inner { background-position: -260px 0; }

	.layout-three-column #pagebody
	{
		background: transparent url(column-left-bg.gif) -580px 0 repeat-y;
	}
	
	.layout-three-column #alpha { width: 160px; }
	
	.layout-three-column #beta
	{
		width: 340px;
		margin: 20px 0 20px 20px;
	}
	
	.layout-three-column #gamma
	{
		width: 160px;
		margin: 20px 0 20px 40px;
	}
	
	.layout-three-column .module-powered .module-content
	{
		margin-right: 20px;
	}
```


----------



## KoosHopeloos (Nov 3, 2004)

@ rollerr: Try the following to sort things out. Make within a new CSS-file the setup of your webpage to be. Strip everything except borders and perhaps a background color for each column. When finished, save file and make a backup file and then start with adjust/adding in the rest. This way you should be able to get it the way you wish.


----------



## DJ-Zep (Mar 11, 2006)

Check the page that the table is on to see if it has height and/or width attributes in the tag (i.e. <td width="200" height="150">)


----------

