Learn the easy steps to position an image to the right using FreeMarker

I'm attempting to align the final image on the right side of the page in order to achieve a symmetrical look.

The code I have been using in FTL is as follows, but it consistently ends up 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>

htmlcssfreemarker

Answer №1

To achieve the desired outcome, simply set your table width to 100%.

<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>

Answer №2

Here is an example provided, however it is recommended not to use inline styling in this manner. Currently, tables are used for tabular data, while everything else is created using div elements.

*,
 :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>

A more efficient 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Some characters are not compatible with the CSS writing-mode feature

There seems to be an issue with the CSS writing mode not applying correctly to the symbol '№'. Here is an example: <html> <head></head> <body> <p style="writing-mode: vertical-lr;"> Номер № ...

css

Is it possible to resize a div based on the width of the window?

Imagine a scenario where it's not possible to change the content of a div, but only its shape and size by using transform: scale(1.4) for instance. To better understand this concept, take a look at This Website and try resizing the window using brows ...

htmlcssreactjs

What is the best way to incorporate HTML styling into a PHP email tutorial focused on Swift Mail?

I recently created a competition page for a client, and they have requested that the email sent to customers be more visually appealing than just plain text. The tutorial I followed only included basic text within the 'send body message' section. ...

phphtmlemail

How can we combine Angular Gradients and CSS Webkit Gradients for a modern design

Can a gradient be created that resembles the color picker style shown here? The outer part showing full saturated, 50% brightness values and transitioning towards the inside to 100% brightness. ...

csscolorsgradientcolor-picker

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

Using jQuery, extract the input value and verify its accuracy. If correct, display the number of accurately predicted results

I am attempting to extract the value from an input field and validate if the answer is accurate. Rather than simply indicating correctness, I aim to analyze and display the number of correct responses alongside incorrect ones. Encountering difficulties wit ...

javascriptjqueryhtml

The div element is failing to occupy the entire page

I have encountered an issue where I created two small blocks, but they do not start from the screen edges. Instead, they take up space from the left, right, and top as well. Here is my code: HTML <body> <div id="header"></div> & ...

htmlcss

Having difficulty in animating the upward movement of textbox2

I've got a form that contains 2 buttons and 2 textareas. When the form loads, I want to display only section1 (button, textarea) and the section2 button. Upon clicking the section2 button, my aim is to hide the section1 textarea, reveal the section2 t ...

javascripthtmlcsscss-animations

Prevent pinch zoom in webkit (or electron)

Is there a way to prevent pinch zoom in an electron app? I've tried different methods, such as using event.preventDefault() on touchmove/mousemove events in JavaScript, adding meta viewport tags in HTML, adjusting -webkit-text-size-adjust in CSS, and ...

javascripthtmlcsswebkitelectron

Position the current div in the center of a bootstrap progress bar for mobile devices

I'm facing an issue with the bootstrap progress bar on my website, especially on mobile devices where it goes off the screen. I want the current page marker on the progress bar to be centered on the screen while allowing the bar to extend beyond the s ...

phpcsssymfonybootstrap-4symfony4

Tips for accurately placing the iOS audio player in the footer section

In my web page, I have created a simple footer that shows the currently playing track title and includes an HTML audio player. The layout looks great on desktop browsers and Android devices, but on iOS, the player is positioned far below the footer. To ad ...

htmlioscsshtml5-audio

Various text sizes within a nested HTML list structure

I've developed a nested CSS class for an ordered list on my website, but I'm encountering a problem where each list item is appearing in different font sizes even though I have specified the font size. .number_list ol { font:normal 1.2em ...

htmlcsshtml-lists

Troubleshooting issue with CSS SVG Clip path functionality - facing technical difficulties

Having an issue with a clip path in my CSS. When I apply the clip path to my CSS fill, the image isn't showing up... I'm using Chrome. Any ideas on how to fix this? I found this helpful generator https://example.com .card .content .picture img { ...

cssgoogle-chromeclip-path

elements that overlap exclusively in IE 8

Here's the information I need help with: http://jsfiddle.net/ktpmm5/Z5z8n/ The page can be accessed here: In IE 8, my paging element is shifted to the left and covers the heading. This issue does not occur in Chrome, FF, and Opera. I've been t ...

phpjqueryhtmlcssinternet-explorer

What are the steps to troubleshoot CSS issues in NextJS?

Currently, I am encountering challenges while trying to integrate markdown with CSS. The problem I am facing has been replicated in the link provided: https://codesandbox.io/s/react-quilljsbasic-forked-3rcxw?file=/src/App.js ...

cssreactjsmarkdownnext.js

Track your status with jQuery technology

I have a link: <a href="/test/number/3/phone/0">33df</a> Is there a way to determine if the words 'number' and 'phone' are present in this link? I am looking for a function similar to: check('number', ' ...

javascriptjqueryhtml

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

cssruby-on-railsnavbarbootstrap-4

Tips on updating the content of an HTML element dynamically when it is already being populated using *ngFor

I have created an HTML component that utilizes *ngFor to dynamically generate HTML elements. This results in a total of 3 tags being generated when the code is run. I have included data such as subject in the component file which updates dynamically, how ...

htmlangulartypescripthttpclient

Trouble with ASP.NET Master Page CSS Rendering Incorrectly

My CSS seems to be causing some trouble as the DIVs are not aligning as they should. Instead, they are just wrapping around the text and not adjusting the page layout properly. Here is an example of my CSS: body { height: 95%; width: 100%; ma ...

htmlcssasp.net

Presenting CSV data in a tabular format using Angular and TypeScript

I am facing an issue with uploading a CSV file. Even though the table adjusts to the size of the dataset, it appears as if the CSV file is empty. Could this be due to an error in my code or something specific about the CSV file itself? I'm still learn ...

htmlangulartypescriptnpm