Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

adhik13th's avatar

How to manage css to html colomn out of paper

I have print pdf using dompdf and i use basic html but , i have a problem on paper on right side , my colomn is out of paper like this picture image or on this link image . this image showed colomn and this left is correctly but on this right its out of range . i need to create like this left side but i dont know.

its my code :

CSS

    <style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.columnA {
  float: left;
  width: 68.7%;
  padding: 10px;
  height: 200px; /* Should be removed. Only for demonstration */
  border: 1px solid black;
}

.columnB {
  float: left;
  width: 68.7%;
  padding: 10px;
  height: 120px; /* Should be removed. Only for demonstration */
  border: 1px solid black;
}

.columnC {
  float: left;
  width: 33.3%;
  padding: 10px;
  height: 200px; /* Should be removed. Only for demonstration */
  border: 1px solid black;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

Colomn

<div class="row">
  <div class="columnA" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnA" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>
<div class="row">
  <div class="columnB" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnB" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
 
</div>
<div class="row">
  <div class="columnC" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnC" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="columnC" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
 
</div>

i try this change this css float its make change the posisition but i can do correctly , if i change this float 50% its will create space on this right correctly but i dont need 50% my case is 68,7%, can someone help ?

0 likes
5 replies
jlrdw's avatar

Have you set viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

And decrease main div width some to allow for printer margins.

rodrigo.pedra's avatar

First row has two cells with class columnA, and .columnA class have a width of 68.7%,

so

68.7% + 68.7% = 137.4%

Which is greater than 100% and will overflow the page width.

You need to use different classes, or change the width in those classes so a row does not have a total width greater than 100%.

Maybe you were after this:

<div class="row">
  <div class="columnA" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnC" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>
<div class="row">
  <div class="columnB" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnC" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
 
</div>
<div class="row">
  <div class="columnC" style="background-color:white;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="columnC" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="columnC" style="background-color:white;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
 
</div>

I changed the last cell in each row to use the .columnC class, so they sum up to 100%.

rodrigo.pedra's avatar

One tip:

When designing HTML for generating PDF I find more easy, and consistent across browsers, to use hard pixels instead of percentage.

Do some tests on a value that fits the page width you are working with, and base your other layout elements on that.

jlrdw's avatar

Didn't see css on first edit. But yes you have to be under 100% of paper size, allow for print margins also, experiment a little.

1 like

Please or to participate in this conversation.