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 can I find the css error when I run a jquery plugin on IE8?

    How to reload a css background-image inside a directive

    How to fix this css float problem?

    how to increase the photoshop sprite canvas width and height

    Box-shadow is overlapping other elements, how can I fix it?

    How to make Gravity Forms Responsive (left/right )?

    How to create css shadow effect [duplicate]

    How to accomplish this layout with CSS and HTML?

    How to keep navigation tab remain unchanged

    How to change the style of an active menu with php + css

    How to stop CSS element style from getting into my class style?

    How to change the style of the arrow in a select box using css

    Jquery: How to find if element has inline property (not in CSS)

    How to layout ASP.Net RadioButtons with Images?

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    how to append an icon to an input search?

    How is padding-top as a percentage related to the parent's width?

    How to disable correctly CSS3 transition property when needed

    jQuery — how to animate a div using height:auto

    How can I toggle the background color of the body of my HTML document, with one button?

    How to set the select to have the width of the selected option

    How can I use CSS to set as my
  • background if I'm using the Zend framework?
  • How to change the scrolling text in CSS or JQuery

    How do I make part of a style element a function? (IE: color:$random instead of color:red)

    How to create two column in form using css

    Hide one div when showing another with JavaScript

    How to turn on Visual Studio 2010 .css Intellisense on .less file

    How to keep banner animations running while changing webpages [closed]

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    How can I use CSS to insert a line break after but not before an element?