CODEWITHSUNDEEP
htmlcssfreemarker
Erry215
Erry215

Reputation: 506

How to align image to right on FreeMarker

I'm trying to align the last image on the right side of the page in order to make it looks like simmetric

The code I'm using on FTL is the following but it is always next to the middle section:

            <table class="header">
                <tr>
                    <td align="left" valign="middle">
                        <img src="${logo1}" style="float: left; margin: 7px; width: 120px; height: 67.5px" /> 
                    </td>
                    <td align="left" valign="middle" style=" margin-left: 50px;">
                        <span class="infos" style="font-size:17pt"><b>${info}</b></span><br/>
                    </td>
                    <td align="right" valign="right">
                        <img src="${lastLogo}" style="float: right; margin: 7px; width: 120px; height: 67.5px" />
                    </td>
                </tr>
            </table>

Overview example

Upvotes: 0

Views: 1914

Answers (2)

Grzegorz T.
Grzegorz T.

Reputation: 4113

An example below, but don't use styly inline that way. We currently use tables for tabular data, otherwise we create everything on div.

*,
 :after,
 :before {
  box-sizing: border-box;
}
<table class="header">
  <tr>
    <td>
      <img src="https://fakeimg.pl/120x60/ff0000/fff" style="width: 120px;" />
    </td>
    <td>
      <div class="infos" style="border: 1px solid red; padding: 0 20px; font-size:17px; max-width: 120px;">
        <b>Lorem ipsum dolor sit.</b>
      </div>
    </td>
    <td>
      <img src="https://fakeimg.pl/120x60/4efc03/000" style="width: 120px;" />
    </td>
  </tr>
</table>

Better solution

*,
 :after,
 :before {
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
}

.header img {
  width: 120px;
}

.infos {
  display: flex;
  align-items: center;
}
<div class="header">
  <div><img src="https://fakeimg.pl/120x60/ff0000/fff"></div>
  <div class="infos">
    <b>Lorem ipsum dolor sit.</b>
  </div>
  <div><img src="https://fakeimg.pl/120x60/4efc03/000"></div>
</div>

Upvotes: 1

Dan Mullin
Dan Mullin

Reputation: 4435

If you make your table take up 100% width, it will do as you desire.

<table class="header" style="width: 100%">
  <tr>
    <td align="left" valign="middle">
      <img src="${logo1}" style="float: left; margin: 7px; width: 120px; height: 67.5px" />
    </td>
    <td align="left" valign="middle" style=" margin-left: 50px;">
      <span class="infos" style="font-size:17pt"><b>${info}</b></span><br/>
    </td>
    <td align="right" valign="middle">
      <img src="${lastLogo}" style="float: right; margin: 7px; width: 120px; height: 67.5px" />
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions