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 vertically align lists when one li is a div

    How do I insert content after text in an html element using CSS?

    How to add a color transitions in CSS and HTML like the one in the login area of the Instagram app?

    How to “comment out” CSS code from JavaScript?

    How to make a themeable web application using CSS?

    How do I remove the double border on this table?

    CSS styling of a line: how to get the line to move with the header above it

    How to change css rules of external stylesheet [duplicate]

    How can I make this menu's “clear:both” work in Google Chrome?

    How can I get these two widgets to align horizontally using CSS selectors?

    how to combine the css selector using “:not”

    How to add a second slideshow on the same webpage

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    How to code a drop down menu in css?

    How to play a second CSS animation once the first one finishes

    How to apply CSS style which will be ignored for tfoot or last TR

    How to add media attribute to ASP.NET MVC4 style bundle

    How do I do the CSS for this?

    How to add border to galleria big image?

    How to put text and image in a same line?

    How to style radcombobox item so that words that wrap are separated

    how to css for data attribute [duplicate]

    How to use printer friendly function with CTRL+p?

    How can I block/allow access to document.styleSheets information, and what is the reason for this

    How to ignore

    CSS rules in wordpress theme?

    Make image show when screen reaches a certain width (pixels)

    How to center in CSS only after specific HTML element?

    How to select children in CSS

    How do I apply CSS to the table generated into another window?

    How to customize the CSS of a theme generated with the ThemeBuilder?