0

I am trying to print the page..... for this i have two different columns.... so i reduced the width of one column to bring the previous column up..... but i am not able to bring the second column...

providing my printing css below

http://jsfiddle.net/pd7hF/embedded/result/

@media print 
 {
    .mainDiv { display: none;}

    .form-horizontal .control-label {width: 50px;}

     #poLeft { width: 300px; border: 1px solid red;}

     #billTo {width: 122px;}

     #cityLeft{width:40px;margin-left: 85px;height: 13px;}

     #stateLeft{width: 50px;height: 13px;width: 41px;}

     #zipLeft{width: 40px;height: 13px;}

     #countryLeft{width: 117px;margin-left: 62px;height: 13px;}

     #phoneLeft{width: 121px;height: 13px;}

     #emailLeft{width: 125px;}

     #noteLeft{width: 101px;}

     #poLeft{width: 154px;}  

     #poRight{width: 300px;}

     #fileRight{width: 101px;}

     /* any other styles you wish to target go here */
  }
snowp
  • 495
  • 1
  • 6
  • 22

1 Answers1

0

@user2045025 Change the Printing CSS like this 

        .mainDiv {display: none;width:100%;}
        label {padding-right:10px;}
        .form-horizontal .control-label {width: 20%;}
        #poLeft {width: 48%;border: 1px solid red;}
        #billTo {width: 92%;}
        #cityLeft{width:25%; margin-left:15%; height: 13px;}
        #stateLeft{  height: 13px; width: 5%;}
        #zipLeft{width: 20%; height: 13px;}
        #countryLeft{width:70%; margin-left:11%; height: 13px;}
        #phoneLeft{width:72%; height: 13px;margin-left:11%;}
        #emailLeft{ width:85%;}
        #noteLeft{width:80%;}
        #stateLabelLeft{display: inline-block; margin-left: 1px;}
        #zipLabelLeft{display: inline-block; margin-left: 1px;}
        #poRight{ width: 48%; }
        #fileRight{width: 92%;}

        #vendorListHeading{
            background-color: #1a4567; 
            color: white;
            border: 1px solid red;
          }

     #cityRight{width:20%;height: 13px;}
     #stateRight{width:5%;  height: 13px;}
     #zipRight{width:15%; height: 13px;}
     #countryRight{width: 34%; margin-left:55px; height:13px;}    
     #phoneRight{width:30%; height: 13px;}

    }
snowp
  • 495
  • 1
  • 6
  • 22
  • thanks for your reply....when i print the page still my right column is down according to your css....http://jsfiddle.net/4GcfE/embedded/result/ –  Feb 18 '13 at 17:18
  • @user2045025 Please adjust the width of #poLeft and #poRight – snowp Feb 19 '13 at 04:52
  • can you update in the fiddle...i tried but not working...thank u –  Feb 19 '13 at 14:36
  • 1
    @user2045025 I Updated in Jfiddle please check it http://jsfiddle.net/bsPrabu/rFSF3/10/ – snowp Feb 20 '13 at 10:02
  • thanks for your reply....i looked into the fiddle can u tell me what u added...i am not able to figure it out... –  Feb 20 '13 at 21:57
  • @user2045025 i Edited My answer please check it – snowp Feb 21 '13 at 05:30