Columns

[NADB]

Hi everybody.

I need help with this code. I am trying to delete column one and expand column into what use to be column one's space. I tried a code and it expanded column 2 on the home page but it also expanded columns on other pages that I didn't need the column expansion on.

How do I make column 2 expand only on the homepage. Here is the code. I know it's easy to do but I am new to css.

Thanks in advance for anyone's help.

.xg_colgroup {
height:1%;
clear:left;
}
.xg_1col, .xg_2col, .xg_3col, .xg_4col {
float:left; display:inline;
margin-left:15px;
}
.xg_colgroup .first-child {
margin-left:0;
}
body>#xg img { height:auto; }
.xg_1col { width:220px; }
* html #xg #xg_body .xg_1col .xg_module { width: 220px; overflow-x:hidden; }
#xg #xg_body .xg_1col img { max-width:206px; }
#xg #xg_body .xg_1col .pad img { max-width:190px; }
#xg #xg_body .xg_1col .comment img { max-width:119px; }
* html #xg #xg_body .xg_1col img { width: expression(this.width > 206 ? 206: true); height:expression(this.width > 206 ? 'auto': true); }
* html #xg #xg_body .xg_1col .pad img { width: expression(this.width > 190 ? 190: true); height:expression(this.width > 206 ? 'auto': true); }
* html #xg #xg_body .xg_1col .comment img { width: expression(this.width > 119 ? 119: true); height:expression(this.width > 206 ? 'auto': true); }

.xg_2col { width:455px; }
* html #xg_body .xg_2col .xg_module { width: 455px; overflow-x:hidden; }
#xg_body .xg_2col img { max-width:441px; }
#xg_body .xg_2col .pad img { max-width:425px; }
#xg_body .xg_2col .comment img { max-width:354px; }
* html #xg_body .xg_2col img { width: expression(this.width > 441 ? 441: true); height:expression(this.width > 206 ? 'auto': true); }
* html #xg_body .xg_2col .pad img { width: expression(this.width > 425 ? 425: true); height:expression(this.width > 206 ? 'auto': true); }
* html #xg_body .xg_2col .comment img { width: expression(this.width > 354 ? 354 : true); height:expression(this.width > 206 ? 'auto': true); }

.xg_3col { width:690px; }
* html .xg_3col .xg_module { width: 690px; overflow-x:hidden; }
.xg_3col img { max-width:676px; }
.xg_3col img .pad { max-width:660px; }
.xg_3col img .comment { max-width:589px; }
* html .xg_3col img { width: expression(this.width > 676 ? 676: true); height:expression(this.width > 206 ? 'auto': true); }
* html .xg_3col img .pad { width: expression(this.width > 660 ? 660: true); height:expression(this.width > 206 ? 'auto': true); }
* html .xg_3col img .comment { width: expression(this.width > 589 ? 589: true); height:expression(this.width > 206 ? 'auto': true); }

.xg_4col { width:925px; }

/* .block - divides a module in half when used with .left and .right */
.xg_3col .block {
width:320px!important;
text-overflow:ellipsis;
}
.xg_4col .block {
width:460px!important;
text-overflow:ellipsis;
}
* html .xg_3col .block,
* html .xg_4col .block {
overflow:hidden;
}

[mburt]

CSS cannot do something like this on the fly. You must revert to JavaScript or a different client-side language that can do so.