I have three images that I want to display in a single row next to each other.
Here is the HTML:
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="" alt="" width="150" height="50" />
</div>
Here is the CSS:
#client_logos { display: inline-block; }
For some reason, it only displays two logos next to each other. Not sure what's wrong. Any ideas?
URL:
See screenshot.
3 Answers
You have a line break <br> in-between the second and third images in your markup. Get rid of that, and it'll show inline.
The code you have posted here and code on your site both are different. There is a break <br> after second image, so the third image into new line, remove this <br> and it will display correctly.
Place this css in your page:
<style>
#client_logos {
display: inline-block;
width:100%;
}
</style>
Replace
<p><img class="alignnone" style="display: inline; margin: 0 10px;" title="heartica_logo" src="" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="" alt="" width="150" height="50" /></p>
To
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="" alt="" width="150" height="50" />
</div>
