Search code examples
htmlcssprinting-web-page

printing css to move right column up


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 */
  }

Solution

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