horizontal alignment of row content to the right in HTML

Trying to align a text and a small image horizontally to the right:

    <div class="row float-right">
      <div class="title" >Stream Chat</div>
      <img src="~assets/chat.svg" />
    </div>
    <!-- rest of the code -->
    <div class"row">
    ...

Struggling with keeping both elements on the same line and to the right without overlap. The float-right class moves them to the right but causes the image to stack under the text and shifts the row alignment. Seeking a solution to ensure the text and image are aligned and to the right of the row.

htmlcssimagegridrow

Answer №1

Flexbox is the way to go for this task! It's the simplest and most effective method.

#container{
display:flex;
justify-content:flex-end;
align-items:center;
border:solid 1px blue;
}
<div id="container">
  <div id='txt'>Stream Chat</div>
  <img src="https://via.placeholder.com/100" />
</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

Center Align Images in HTML List Items

Hey there! I'm currently diving into the world of web development with responsive design, but I'm still a bit of a newbie. So please bear with me as I try to explain my issue in detail. If you need more information, just let me know! My current ...

javascriptjqueryhtmlcss

Colorful D3.js heatmap display

Hello, I am currently working on incorporating a color scale into my heat map using the d3.schemeRdYlBu color scheme. However, I am facing challenges in getting it to work properly as it only displays black at the moment. While I have also implemented a ...

javascripthtmld3.js

jQuery failing to recognize multiple selection form elements

<select class="js-example-basic-multiple categories form-control" name="categories[]" style="width: 100%" multiple="multiple"> <option value=""></option> <option value="fresher">fresher</option> <option value=" ...

phpjqueryhtmllaravel-5.4

What steps can be taken to achieve a smooth scrolling speed adjustment?

Upon discovering this website, I was impressed by its smooth scrolling features. The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, p ...

javascriptjquerycsswordpressanimation

Is it possible to center content with Bootstrap?

Is there a different method to center content with empty space on either side? For instance: <div class="col-md-3"></div> <div class="col-md-6"> <div class="form-group"> .... </div> </div> <div class="col ...

csstwitter-bootstrap

What is the best way to add 1 to a number every second with javascript?

My code seems to be functioning correctly, but I'm having trouble setting the delay and stopping the increment after a certain interval. Can someone please assist me with this? Javascript: $(document).ready(function() { var number = parseInt($(& ...

javascripthtml

Python script using Selenium to only print elements in an HTML page that have a specific class value and print only certain elements based on

I am currently developing a script to automatically test all the free proxies available on The website contains a comprehensive list of all available proxies, and I have successfully made my script extract and display them. However, I only want to display ...

pythonhtmlseleniumweb-scrapingproxy

Changing from a vertical to horizontal menu as the parent div is resized

I am looking for a solution to create a CSS effect or Javascript code that will hide a menu inside a div when the browser window or parent div is resized. I want to display another div with the same menu in horizontal orientation when the first one is hidd ...

javascriptjquerycssresizemedia-queries

Is the navigation item only clickable within its designated area?

Apologies in advance for the confusion, but I'm facing an issue with the navigation bar on my website. It works perfectly on the Home page when hovered over, but on the login and register pages, it requires hovering over a specific spot under the item ...

phphtmlcss

Creating a straightforward text/logo design for your HTML website?

After creating a standard website using HTML and PHP, I am now looking to add an exciting text/logo effect for when users first visit the site. Essentially, I want the logo to break apart and transition into loading the homepage once a user lands on the si ...

jqueryhtmlflash

Intersecting interactions: Mouse events on flex boxes

I am facing a challenge in my React application where I have two panels with buttons displayed using flex properties. Below is a simplified version of the HTML/SCSS code that illustrates the setup: <div class="bottom-panel left"> <butt ...

css

Apply a new class to an element's id using jQuery

Looking for a way to change the plus symbol to a minus symbol when clicked in my HTML code. <div class="col-3"> <a href="#tab-1"> <span class="plus" data-tab="tab-1">+</span> </a> </div> <div class="col-3"> & ...

jqueryhtml

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

javascriptjquerycssselenium

Issue with SVG animation causing unnecessary duplication of circle shapes when utilizing animateMotion

I have implemented animateMotion to create an animation along a path. Below is the code snippet that demonstrates this: <!DOCTYPE html> <html> <head> <title>Example Of Many Things!</title> </head> <body> ...

javascripthtmlsvg

The <th> and <td> elements retrieved from the database do not align properly in their respective index positions

Hey fellow Developers, I'm currently working on a School Management System and I have two tables in the database - one for Subjects and another for storing scores obtained in those subjects, called 'scores'. My goal is to display subject nam ...

phphtmlmysqlpdo

When utilizing the HTML select element, the <option> tag may only display the initial letter of the chosen option

Here is a snippet of my PHP code: <?php if($_POST['post'] == 'Post') { $cat = $_POST['cat']; $update = "UPDATE table SET category='$cat' WHERE id = '$id' "; $result = mys ...

htmlhtml-select

Running a Node.js script on an Express.js server using an HTML button

I've got an HTML button: <button id="save" type="button" onclick="save()">Save</button> and in my JavaScript code, I want it to execute something on the server side using node.js Here's what I have in mind: function save() { / ...

javascripthtmlnode.jsexpress

Encountering problems when attempting to effectively filter a list of products using data

<div id="prod"> <div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br /> <div class="content" data-brand="Hill" d ...

javascripthtmljquerycheckbox

How to utilize the ternary operator efficiently to evaluate multiple conditions in React

Is there a way to change the style based on the route using react router? I want the description route to display in orange when the user is in the description route, white when in the teacher-add-course route, and green for all other routes. However, th ...

javascripthtmlcssreactjs

The vanishing HTML Div with a fixed height

After implementing a navigation bar inside my header container, I noticed that the main_image div with a blue background color disappeared. Despite setting a height for it, the div was nowhere to be seen. Additionally, the welcome_text div seemed to lose i ...

csshtmlheight