Tips on aligning a div to the right of a headline

My goal is to have an orange circle image placed to the right of my headline <h2>. However, I am facing an issue where the circle jumps above the headline when I shrink the screen. How can I ensure that it stays on the right side no matter the screen size?

.head-text {
  position: relative;
  margin-top: 12%;
  text-align: center;
  width: 100%;
  height: auto;
  background-size: auto;
}
img {
  margin: 10 0 0px 0px;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 150px;
  border: 2px solid #000000;
}
h2 {
  font-weight: bold;
  font-family: Calibri;
  color: black;
  font-size: 4em;
  margin: auto;
}
<div class="section" data-menuanchor="thirdPage">
  <div class="slide">
    <div class="main mainupp">
      <div class="myheader border"></div>
      <div class="head-text">
        <div class="row">
          <div class="col-sm-5 col-xs-2">
            <div class="post-thumb orange"></div>
          </div>
          <div class="col-sm-2 col-xs-8">
            <h2><img>ASDASD</h2>
          </div>
          <div class="col-sm-5 col-xs-2"></div>
        </div>
      </div>

javascriptjqueryhtmlcss

Answer №1

Using the CSS property white-space: nowrap
prevents the text from breaking into 2 lines. To maintain a clean appearance without overlapping text, you can also incorporate overflow: hidden and text-overflow: ellipsis in the styling of the h2:

.head-text {
  position: relative;
  margin-top: 12%;
  text-align: center;
  width: 100%;
  height: auto;
  background-size: auto;
}
img {
  margin: 10 0 0px 0px;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 150px;
  border: 2px solid #000000;
}
h2 {
  font-weight: bold;
  font-family: Calibri;
  color: black;
  font-size: 4em;
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="section" data-menuanchor="thirdPage">
  <div class="slide">
    <div class="main mainupp">
      <div class="myheader border"></div>
      <div class="head-text">
        <div class="row">
          <div class="col-sm-5 col-xs-2">
            <div class="post-thumb orange"></div>
          </div>
          <div class="col-sm-2 col-xs-8">
            <h2><img>ASDASDASDASDASDASDASDASD</h2>
          </div>
          <div class="col-sm-5 col-xs-2"></div>
        </div>
      </div>

Answer №2

To solve this issue, utilize positioning:

img {
  margin: 10 0 0px 0px;
  /* float: right; Remove this */
  width: 40px;
  height: 40px;
  border-radius: 150px;
  border: 2px solid #000000;
  /* Add these */
  position: absolute;
  right: 0;
}

This adjustment should resolve the problem. Ensure not to eliminate position: relative on the .head-text.

Updated Code Snippet

.head-text {
  position: relative;
  margin-top: 12%;
  text-align: center;
  width: 100%;
  height: auto;
  background-size: auto;
}
img {
  margin: 10 0 0px 0px;
  /* float: right; Remove this */
  width: 40px;
  height: 40px;
  border-radius: 150px;
  border: 2px solid #000000;
  /* Add these */
  position: absolute;
  right: 0;
}
h2 {
  font-weight: bold;
  font-family: Calibri;
  color: black;
  font-size: 4em;
  margin: auto;
}
<div class="section" data-menuanchor="thirdPage">
  <div class="slide">
    <div class="main mainupp">
      <div class="myheader border"></div>
      <div class="head-text">
        <div class="row">
          <div class="col-sm-5 col-xs-2">
            <div class="post-thumb orange"></div>
          </div>
          <div class="col-sm-2 col-xs-8">
            <h2><img>ASDASD</h2>
          </div>
          <div class="col-sm-5 col-xs-2"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Also, be sure to properly nest the tags.

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

Using a React component to send data through a POST request to an API

When attempting to send a selected value from a Dropdown to an API using a POST request, I keep encountering a 405 (Method Not Allowed) error. Despite trying different ways to handle the onChange event, such as: onChange{(e) => this.onChangeHandler(e.t ...

javascriptreactjs

What could be causing anime.js to malfunction when clicked in Vue.js?

After implementing the mounted() function, the animation now successfully plays when the page is updated. However, there seems to be an issue as the animation does not trigger when clicked. Even though console.log registers a click event, the animation fa ...

javascriptvue.jsanimationanime.js

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

cssangularwebkendo-ui

Utilize Jquery to send a preset value through an ajax request

I am working on a select box functionality where the selected option is sent via ajax to a server-side script. The current setup is functioning properly. Here is the code for the select box: <select id="main_select"> <option selecte ...

javascriptjqueryajax

What is the procedure for eliminating a cookie with Javascript?

Is there a way to delete the cookie set by javascript:void(document.cookie=”PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com”); The code below fails to do so. javascript:void(docum ...

javascriptcookies

Tips for generating documentation using markdown within the docs directory on GitHub with the help of JavaScript

After browsing through numerous documentation websites, I have noticed that many of them share the same layout and features. This has led me to question whether there is a common library used by all these documentation sites. How do they achieve this unif ...

javascripthtmlcssdocumentation

Angular is unable to fetch the chosen option from a dropdown selection

Recently, I encountered an issue with a module form that appears as a pop-up. Within this form, users can input data required to create a new object of a specific class. One field allows users to select a ventilation zone for the new room object being crea ...

htmlangulartypescriptforms

Identifying a Malformed URI in JavaScript

In JavaScript, it is considered a best practice to use certain patterns to detect errors instead of solely relying on try-catch blocks. One easy way to do this is by using TypeError: if (typeof foo !== "number") { console.log("That ain't a number!" ...

javascripterror-handling

How can componentsProps be utilized within Material-UI components?

While going through the API documentation of components like AutoComplete, StepLabel, and BackDrop, I came across the componentsProps property. However, I haven't found a clear explanation or example of how to use this prop effectively. If anyone cou ...

javascriptreactjsmaterial-uicomponents

Is there a way to dynamically set a database path in Express.js depending on the user's login status?

I have a backend service that serves as the primary entry point for my web application, where I want to dynamically allocate a database path based on user login. While I understand that this solution may not be scalable in the long run, I plan to use it fo ...

javascriptnode.jsexpress

The function for converting a jQuery element to a DOM element is yielding a blank string as

What is the reason behind this code not working as expected: function getElementWidth(el){ return $(el)[0].style.width }; getElementWidth('#someElementIdId'); // returns -> "" However, when using this code... function getElementWidth(el){ ...

javascriptjquery

Guide to preserving canvas state in React?

I am currently working on a drawing application that allows users to draw lines on a canvas. The functionality is such that the line starts drawing on the first click, continues as the mouse moves, and stops on the second click. However, each time a user ...

javascriptreactjstypescriptcanvasdraw

Make sure to specify the max width of the Bootstrap container class to 940 pixels

Currently, I am utilizing Bootstrap 4 with the default container width on my desktop screen. For the main content section of my application, I would like it to be contained within a maximum width of 940px on larger screens. Should I override the existing ...

csstwitter-bootstrapbootstrap-4

Removing a row from an HTML table using JavaScript

I have a piece of JavaScript code that is responsible for managing an HTML table. One of the functionalities it needs to support is deleting a row from the table. Currently, I am using the following snippet of code to achieve row deletion: var rowToDele ...

javascriptjqueryhtml

Issue with AngularJS controller method not functioning properly when assigned to a Div

I am facing an issue with a login form and its controller. The login function is not triggering upon submitting the form for some reason. Here is the code snippet for the form within the larger view file: <div class="login-wrap" ng-controller="LoginCt ...

javascriptjqueryangularjs

Text input causes online keyboard to stop functioning

I have customized a virtual keyboard based on the instructions provided in this tutorial: The JQuery code snippet for the virtual keyboard: $(function(){ var $write2 = $('#write2'), shift = false, capslock = false; $('#keyboard li ...

jquerykeyboardtextarea

Troubleshooting Angular MIME problems with Microsoft Edge

I'm encountering a problem with Angular where after running ng serve and deploying on localhost, the page loads without any issues. However, when I use ng build and deploy remotely, I encounter a MIME error. Failed to load module script: Expected a ...

javascripthtmlangulartypescriptwebstorm

Is it possible to load a route first, and then proceed to load the static files from the public folder in a Node.js application?

When running the app.js file for Node.js, I am trying to ensure that the '/' route is loaded first. This route handles authentication and then redirects to the index.html file. However, I am encountering an error because the program cannot find ...

htmlnode.jsexpressauthenticationpassport.js

Rails New Action fails to render HTML during AJAX GET request

Currently, I am in the midst of a project where I made an upgrade to the rails gem from version 2.3.5 to version 2.3.11. However, now I am encountering an issue with getting the controller actions to return HTML via jQuery ajax get requests. An example sce ...

jqueryruby-on-railsajaxcontrollerget

Choose all elements following the first child element

My goal is to create a LESS rule that targets every element following the current element, excluding the first child. I've tried using this syntax: (& ~ *):not(:first-child) { margin-left: 5px; } and also this one: & ~ *:not(:first-child ...

csscss-selectorsless