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

What is the purpose of using an img tag to retrieve a URL that is not an image?

Upon investigating a slow page load, I came across something interesting in the HTML: <img src="/ajax?action=askedAboutCookies" style="display:none" width="0" height="0" alt="" /> When the page loads, it sends a request but never receives a respons ...

javascriptjqueryhtmljson

How can you enable fullscreen for a featherlight iFrame?

I have implemented Featherlight to display an iframe within a popup modal on my website. If you click the iframe button, you can see a demo of how it works. One issue I am facing is that the generated iframe tag by Featherlight does not include allowfulls ...

javascriptjqueryhtmliframe

Applying the document height to window height ratio to create a scale ranging from 1 to 100

My goal is to create a scroll bar using two divs with heights of 110px and 10px. The smaller one will be nested inside the taller one, allowing for adjustment of its margin-height from 0 to 100px while still fitting within the larger div. When I refer to ...

javascriptjquerycss

How can JQuery determine the current CSS background image of a three-state icon or button?

I am facing a challenge with using three images to represent different states of an application icon, and I am trying to achieve this using CSS. There are no issues with the original or hover states: #myDIV { background-image: url(icons/homeBlack.png); } ...

jquerycssbackground-image

Is there a way for me to choose every element excluding those contained within a specific div?

Check out my code snippet: <div class="car"> <div class="make">NISSAN</div> <div class="model">MICRA</div> </div> <div class="discontinued"> <div class="car"> <div class="make">FOR ...

htmlcsscss-selectors

Exploring Angular2's ability to interpret directive templates using the ng-container

Recently delving into angular2, I ventured into creating dynamic forms and generating fields by following the guide provided in this URL. The result was as expected. The dynamic form component renders each field one by one using ng-container, like shown b ...

javascripthtmlangulartypescriptangular2-template

Transforming react.js into HTML and CSS programming languages

I have a small experiment I need help with. As I am not familiar with react.js, I would like to convert my main.jsx file into pure HTML/CSS/JS without using react. The issue I'm facing is how to handle form data submission to the server in vanilla HTM ...

javascripthtmlcssreactjs

CSS is not referred to as animation

Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play. animation not functioning <!DOCTYPE html> <html lang="en"> <head> <meta c ...

css

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

javascripthtmlcsssvg

"JQuery event handlers not functioning as expected: .click and .on failing

For some time now, I've been facing this issue and I'm at a loss trying to figure it out. I have attempted various solutions such as using .click(), .on(), .delegate, and even utilizing .find() to locate the specific element causing the problem. ...

javascriptjqueryhtmlcssclick

Steps to reposition an element with absolute positioning to the upper left corner of the screen

I am currently in the process of creating a hamburger menu without using JavaScript, which should drop down from the top to the bottom when clicked. The burger menu is situated at the top right corner of the screen, but every time I try to drop down the na ...

htmlcsscss-positionabsolutehamburger-menu

HTML does not occupy the entire width of the page

I'm struggling with an issue on my website where the <html> element doesn't span full width on mobile devices. Currently, I am using Bootstrap and Jquery for my website. If you have any insights on what may be causing this problem, please ...

csshtmlmobile

Tips for properly aligning blockquote opening and closing quotation marks

We are currently implementing custom styles for beginning and end quotes in a string using the <blockquote> tag. However, we are having issues with the alignment, as the opening quote appears before the text and the closing quote is at the end of the ...

htmlcsssassblockquote

Convert your flexible designs into dynamic HTML with our Flex to HTML/A

Looking for a solution to transform Flex code into Html/Ajax code. Most of my Flex code includes datagrids, buttons, and text labels. ...

htmlajaxapache-flex

Adding a simulated bottom border to a rotated container

Currently, I am utilizing the CSS3 rotate value to create an arrowhead effect for modal boxes. However, I now require a full arrowhead design with a bottom border. As this involves rotating a div at a 45° angle, adding another border to either side will n ...

htmlcsscss-shapes

What steps do I need to take in order to ensure that each webpage displays unique thumbnails?

As a newcomer to website development, I recently looked into implementing open graph on my site. However, I ran into an issue where I could only set one thumbnail for the entire website. This posed a problem as I wanted each navigation menu tab (Home, Abou ...

htmlangularangularjsfacebook-opengraphshare-open-graph

Is there a way to determine if my great-grandfather has a class attribute that includes a specific word?

Looking for some assistance with my HTML code snippet: <div class='one two three and etc.'> <div> <div> <div class='my_target'> </div> </div> ...

htmlxpath

Is there an automatic bottom padding feature?

Currently, I am facing a challenge in fitting the loader into the container without it being overridden by the browser. Using padding-bottom is not an ideal solution as it results in the loader appearing un-resized and unprofessional. Any suggestions or co ...

cssreactjstypescript

The styles within a media query are not being successfully implemented

update: issue resolved. I discovered that there was a lingering media query in the css file that was meant to be removed. Also, I corrected some errors in the code. Thank you all for your help – it's now working perfectly. I have a set of html and ...

htmlcssmedia-queries

Getting in formation without needing a table

Tables are not the way to go for alignment. How can I align this without using a table? I have several input fields, each with a label positioned to the left of it. I want all the input fields to be aligned on the left side. Below is a simple representati ...

htmlcssvertical-alignment