Results 1 to 2 of 2

Thread: Columns

  1. #1
    Join Date
    Apr 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Columns

    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;
    }

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

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
  •