Question

I’m trying to align two divs horizontally. Having tried about 15 different approaches, I still don’t manage to get it working.

$html .= '<div class="fotoLinks">';
$html .= '  <img src="'.$image->getWebPath().'"/>';
$html .= '</div>';
$html .= '<div class="tekst">';
$html .=    $this->text;
$html .= '</div>';

With corresponding CSS (div.alinea is a wrapper div):

div.alinea
{
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

div.tekst
{
    float: left;
}

div.fotoLinks
{
    float: left;
    margin-right: 15px;
    height: 100%;
}

I hope to get some inspiration for a new approach.

Answer 1

Try

display: inline-block;

Instead of float: left;

EDIT:

A method you can try, but is less supported, for your wrapper div, set:

display: table;

And for your inner divs:

display: table-cell;