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 combine widget webapp framework with SEO-friendly CSS and JS files

    How can I Add sub menus to dropdown menus?

    How to change social network icons colors in fixed menu?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    Once nav bar reached top of window, how to keep it there?

    How to display “Classic” fractions in CSS / Javascript

    How to get this functionality to work

    How to refresh to top of HTML page using css

    How to style responsive table to make table like list?

    How to style dropdown menu using CSS in HTML

    How do I make it impossible to highlight text using CSS?

    ¿How to create text slider animation?

    How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?

    How to make font sharp in CSS?

    How to use SASS logic within a CSS 3 media query [duplicate]

    How to display source code with indent in a web page? HTML? CSS?

    How to Remove the Awkward Margin to the Left of my Unordered List?

    How can I write in CSS if I'm using list tag for this? [closed]

    How would you code this: The SO Menu [closed]

    How to block CSS and js file loading in Google Blogger template?

    How do you customise HTML select option menus? [duplicate]

    How to trigger CSS “hover state” using Javascript? [duplicate]

    Bootstrap - how to clear css from element to start over?

    How slow is * css selector for mobile browsers?

    Always have my Image show in X percentage using CSS?

    css: how to inherit whole class

    IE11: How to prevent sprite animating to correct co-ords

    How to show a background image over foreground image using CSS

    How to achieve this oval layout with CSS