Web Page Not Printing with Preset Dimensions

Please I have the following CSS Code listing

<style type="text/css">
.idbg {
    min-width: 675px;
    width: 675px;
    min-height: 976px;
    height: 976px;
    border: 2px solid;
    border-radius: 2px;
    border-color: black;
    overflow: hidden;
}

.colored {
    color: orangered;
    text-transform: capitalize;
    text-align: left;
    font-weight: bold;
    font-size: large;
}

.coloredinverse {
    color: black;
    text-transform: capitalize;
    text-align: left;
    text-decoration: underline;
    font-weight: bold;
        font-size: large;
}

.idbg .row {
    margin-right: 15px;
    margin-left: 17px;
}

.col-xs-9 {
    position: relative;
    min-height: 1px;
}

Used In A web page Like So

    <div class="row">
                @Html.Partial("_zoneAdminPartial")
                <div class="col-xs-9">
                    @Html.Partial("_validationSummary")
                    <div class="idbg">
                        <div>
                            <img class="pull-right" src="~/images/badge_header.png" />
                        </div>

                        <div class="row col-xs-12" style="display: table-cell; vertical-align: middle; text-align: center; margin-top: 70px; margin-bottom: 70px; margin-left: -10px;">
                            <img  src="@Model.Photograph.imagePath" style="width: 300px; height: 300px;"/>
                        </div>


                        <div class="row" style="margin-top: 25px; margin-bottom: 25px; padding-top: 10px; padding-bottom: 10px;">
                            <div class="col-xs-12" style="background-color: lightcyan; border: 2px solid; border-radius: 10px; border-color: lightcyan;">
                                <div class="padding-y-10">
                                    <div class="colored col-xs-4">
                                        Full Name
                                    </div>

                                    <div class="coloredinverse col-xs-8">
                                        @Model.Title @Model.FirstName @Model.LastName
                                    </div>
                                </div>
                                  <br/>



                                @if (Model.EducationalInfornation != null)
                                {
                                    <div class="padding-y-10">
                                        <div class="colored col-xs-4">Zone:</div>
                                        <div class="coloredinverse col-xs-8">@Model.EducationalInfornation.Zone</div>
                                    </div>
                                      <br/>


                                    <div class="padding-y-10">
                                        <div class="colored col-xs-4">Chapter:</div>
                                        <div class="coloredinverse col-xs-8">@Model.EducationalInfornation.Chapter</div>
                                    </div>
                                      <br/>



                                }
                                else if (Model.ParticipantSchoolInformation != null)
                                {
                                    <div class="padding-y-10">
                                        <div class="colored col-xs-4 ">Zone:</div>
                                        <div class="coloredinverse col-xs-8">@Model.ParticipantSchoolInformation.Zone</div>
                                    </div>
                                   <br/>

                                    <div class="padding-y-10">
                                        <div class="colored col-xs-4">Chapter:</div>
                                        <div class="coloredinverse col-xs-8">@Model.ParticipantSchoolInformation.Chapter</div>
                                    </div>
                                      <br/>


                                }

                                <div class="padding-y-10">
                                    <div class="colored col-xs-4">Designation:</div>
                                    <div class="coloredinverse col-xs-8">@Model.Designation</div>
                                </div>
                                  <br/>


                                <div class="padding-y-10">
                                    <div class="colored col-xs-4">Badge Id:</div>
                                    <div class="coloredinverse col-xs-8"><span class="label label-info">@Model.UniqueRegistrationNumber</span></div>
                                </div>

                            </div>
                        </div>
                         <div class="padding-y-10 margin-t-20">
                            <img class="pull-right" style="height: 40px; width: 100%; margin-top: 30px;" src="~/images/badge_footer.png" />
                        </div>
                    </div>

                </div>
            </div>

Now WHAT I want to achieve is The printable portion of the page will have the exact dimensions 675px x 976 px when printing

The page displays fine when viewed on a webpage all dimensions are maintained but when printed the portion of page printed (div with class idbg and all its contents) fills up the Paper and dimensions are ignored

Please Is there a way around this problem

Regards