How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?


Tags: php,html,css,css-float,dompdf

Problem :

The image below explains what I am trying to achieve.

enter image description here

I need to show a user's car picture with the name under it. Each image/name pair should be in a DIV so as a user adds more cars, they move to the next line or page. Ideally the DIVs should be centered, more as a matter of aesthetics.

Using DOMPDF, I am generating a PDF from an HTML layout.

Unfortunately, DOMPDF's support for float is bad, even in the new 0.6.2 beta. I wonder if this layout I am proposing could be done without float. DOMPDF also does not support unordered lists.

I have tried some solutions using tables, but this also isn't good since DOMPDF does not allow cells to spill over to the next page.

I am using PHP 5/ codeigniter, and DOMPDF 0.5.2 (stable).

Any suggestions on how to get this layout are greatly appreciated!

Here is the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">

        img {width: 150px; height: 150px;}

        h1 {font-size: 3em; text-align: center;}

        h2 {text-transform: uppercase; width: 150px; text-align: center;}

        div {margin: 10px; width: 150px;}

    </style>
</head>


    <h1>My Cars</h1>

        <?php foreach ($cars as $row): ?>

            <div>

                <img src="<?php echo $row->cars_picture; ?>" />

                <h2><?php echo $row->cars_name; ?></h2>

            </div>

        <?php endforeach; ?>

</html>


Solution :

Thanks to @rkw and @manyxcxi for helping out. At the end the only way of doing this without hacks was to use mpdf instead of DOMPDF.

I have the impression mpdf is a much better library, with better documentation. It has partial support for float, but it works very nicely and does exactly what I needed above.


    CSS Howto..

    How to reference nested classes with css?

    CSS Image size, how to fill, not stretch?

    How to make my popup not transparent and sideways draggable?

    How can I make the left div expand and the right div have constant width?

    How to get the effect not to add one more div?

    How to prioritize custom css over the default Angular-material css

    How can I target a block after another block with css?

    How to size images loaded from other users such that dimensions are maintained yet a max width and height are set with css? (HTML/JS/CSS)

    How to make a responsive scrollbar?

    how to use pseudo-classes (like after, before) inline in CSS

    How to appear two HTML input elements in single line (row)

    How to work with dynamic container in Isotope?

    How to rotate image used as list type in unordered list

    How to slide these divs continuously in loop

    How can I slide a image up and down over a background image to create a scanning effect?

    How to add slide animation when showing elements

    How much media queries?

    How to animate some parts of an image using CSS?

    How do I remove the blue border when I click on a hotspot mapped to my image in HTML/CSS?

    How do I animate my CSS progress bar?

    how to make an interactive uploader like gmail and facebook have?

    How to let user change text font and colour in WordPress WSIWYG text editor

    How to CSS: select element based on inner HTML

    how to load an external css file if javascript is disabled

    How do you keep zoom between pages consistent? via CSS?

    Way of Determining How Many Style Rules I have

    How to arrange two butons side by side in Struts2

    html/css: how to on a single line center “title” and have on right buttons

    PHP Header Include (nav bar) not showing up [closed]

    How to structure selectors in css when using specificity?