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 Design a vista like button using CSS

    How do I achieve my bootstrap nav design?

    How to get CSS to work only on specific WordPress pages?

    CSS menu - main option makes wider when submenu appears - how to fix it?

    How to handle caching of GWT theme CSS files

    How to select a range of elements in repeated pattern

    How can I conditionally change css styles with js?

    How to set margin for elements in my case

    How to stop css inheritance in sub unorder list

    How to change my css code to fit the footer to the bottom of the page for any size of monitor?

    How to get element position relative to parent?

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    JavaScript: How to add 'word-wrap' style to element

    How do I create tabs in vertical alignment?

    how to load all css and js at a time in Cakephp

    How do I get Jquery to toggle display

    How do I get a div to change the max-height upon window resize?

    How to apply css transform on iOS without using -webkit-transform?

    How can i use the visibility attribute in css to make my submenu appear and reappear?

    how can tell element to get specified styles?

    How to set the CSS content property with a Google Material Icon?

    How can I change a table td width using CSS in Spiceworks?

    How to add a CSS class to an element using a jQuery Selector?

    How to remove line between two diagonally opposite css scalene triangles?

    How to set the Border Color of a Flex Spark Button with CSS

    how to create Active State in CSS Navigations

    how to set the css left property of a class on the basis of an ID of a tag

    How do you make 2 YouTube videos automatically play one after the other?

    How to position divs inline with same spacing

    How to avoid css transformation(rotate) when removing class?