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