How about trying to position the text and background image within a div to the right?

Is there a way to align both the text and image within a div to the right? I am working on a website where the text inside the div will display the profile names of each member and it keeps overlapping with the image. Any suggestions on how to fix this?

.prof-content-box-left-lower {
    /* [disabled]height: 200px; */
    /* [disabled]position: relative; */
    margin-top: 25px;
    margin-bottom: 5px;
    margin-right: 18px;
    width: 200px;
    position:relative;
    float:right;
    text-align:right;
    z-index:90;
htmlcss

Answer №1

To align the image to the right, you can use inline CSS within the image tag as shown in this example.

 <html>
    <head>
        <style>
            .prof-content-box-left-lower {
                /* [disabled]height: 200px; */
                /* [disabled]position: relative; */
                margin-top: 25px;
                margin-bottom: 5px;
                margin-right: 18px;
                width: 200px;
                position:relative;
                text-align:right;
                z-index:90;
                background: #CCCCCC;
            }
        </style>
    </head>
    <body>
        <div class = "prof-content-box-left-lower">
            <img src = "http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" style = "float: right" width = 100 height = 100>
            my example text
           <div style = "clear: both"></div> <!-- this line clears the float so you can stack these divs, which I expect you probably will-->
        </div>
        <div class = "prof-content-box-left-lower">
            <img src = "http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" style = "float: right" width = 100 height = 100>
            my example text
          <div style = "clear: both"></div>
        </div>
    </body>
</html>

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

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

javascripthtmlcss

Repurpose the identical popup window

I am searching for a solution to use the same pop-up window whenever it is called. Currently, I need to submit a form into a pop-up window and it works well, except in Chrome iOS where each form submission opens a new tab/window instead of reusing the prev ...

javascripthtmljsfiddle

Unable to retrieve a list of objects from the model map when accessing the FTL file

Recently started using FTL (FreeMarker template) and encountering an issue while sending a List of objects from my controller via model map. Below is the snippet of my controller code: Controller Code @RequestMapping(value="/xxx") public String myMethod( ...

javajavascripthtmlspringfreemarker

Auto-layout malfunctions when .col contains a child .table-responsive

Utilizing Bootstrap's auto-layout grid allows for the explicit specification of width for select columns, with the remaining columns evenly splitting the space. However, when an auto-.col contains a child with .table-responsive, the system appears to ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to make translateX transition function in Firefox?

I am encountering an issue with my code working in Chrome but not Firefox. Can anyone offer suggestions on how I can address this problem? The intended functionality is for the door to open when hovered over and for the landscape image to scroll across. Ho ...

htmlcssfirefoxhover

Presenting Nested JSON Data in an HTML Table

My JSON object includes nested items - TagList and TaskRecordList. I aim to show EntityCode and EntityName as a 'parent' row, followed by displaying TagList, and finally, the nested layer's data - TaskRecordList below this initial structure ...

javascriptjsonhtmlknockout.js

What methods can a web server or website use to trigger the re-caching of its own content?

We have recently launched a simple HTML and JS website that requires frequent updates to be reflected to users quickly. However, we are facing challenges with users having to clear their caches. We are exploring options within the HTML file or the Apache w ...

htmlexpressapachebrowserbrowser-cache

What is the best way to transfer information from a nested component to its parent component in React?

I have created a parent component and a child component. The child component, called "Timer," is conditionally rendered when a button is clicked. The functionality of this code is to display a timer when the Start button is clicked and stop the timer when ...

javascripthtmlreactjsreact-hooks

Is there a method or API available for interacting with an <object> that is currently displaying a video?

Yay, I figured it out! I've been using video.js to play videos on a website that needs to work offline too. Unfortunately, using flash is not an option due to compatibility issues. So, I decided to write my own fallback solution. For Internet Explor ...

javascripthtmlinternet-explorervideo

Incorporating a navigation bar at the top and a sidebar on the left side of the lower half of an HTML webpage

Currently utilizing materializecss and bootstrap, I am aiming to create a design that resembles: --------------------------------- --------------------------------- | | | | The objective is to split the page into two horizontal sections. The ...

htmlcsstwitter-bootstrap

Apply unique colors to each accordion title in CSS

I am working with a bootstrap accordion and I want to customize the color of the h4 titles for the elements within the DOM. My goal is to have distinct colors for the first 4 elements, then repeat those colors. .my-platform-title:nth-child(2n+1) { c ...

htmlcsstwitter-bootstrap

When I submit a form with array fields, the output of print_r($_REQUEST) only shows the array values indexed at zero

I have encountered an issue with my form that includes both regular fields and array fields. When I submit the form, everything seems to be working fine, but I am noticing that the values in the array fields are only showing up with an index of zero. I&apo ...

phphtmlarraysforms

The <h> tag gains height on its own accord

Here is my original code: <h4 class="orange2" ><a href="<?php echo base_url();?>v/<?php echo $this->uri->segment(3);?>/<?php echo $v['uniq'];?>"><?php echo trim(strip_tags($v['video_name']));?> ...

javascriptcsshtmltwitter-bootstrap

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

javascriptjqueryhtmlcsscss-animations

"Developing with create-react-app can be frustrating due to its sluggish performance and tendency

As I delve into the world of React, my lack of experience becomes evident. Each time I attempt to start a new project using the create-react-app command, I find myself waiting for what seems like an eternity. Discovering CodeSandbox was a game-changer - ...

javascripthtmlcssreactjs

Error code "ER_BAD_FIELD_ERROR" was encountered with errno 1054 and sqlState "42S22" in index 0 while using MySQL with Angular and managing sessions

When I log in, the following code is executed: <div ng-include="'partials/navbar'"></div> <form name="form" ng-submit="login(form)"> <div> <input type="text" placeholder="Email" ...

javascripthtmlmysqlangularjssession

Struggling with textpath SVG elements in jQuery

Currently, I am implementing SVG in my project and aiming to apply the toggleClass function using jQuery on the textpath elements upon clicking. My initial plan was: $("text#names > textpath").click(function() { $(this).toggleClass("newClass"); }) ...

javascriptjqueryhtmlsvgtoggleclass

Achieving Vertical Stacking and Responsive Scaling for Row and Column Containers on Mobile View Using HTML, CSS, and Bootstrap 4

Utilizing the Bootstrap grid system to organize text boxes in a 2 by 2 layout on a webpage. The desktop view displays the content in rows and columns effectively, but it would be beneficial to have an easy way to adjust the width. However, the problem ari ...

htmlcssbootstrap-4

Design a range of background buttons

I'm currently working on creating a button with a dual background design, where one part features an icon with a fixed width and the other part displays normal text. My current progress looks like this: .button { position: relative; display: i ...

htmlcss

The exact measurement of width is not specified in the custom element that extends HTMLCanvasElement

I have created a custom element that extends a canvas, but when I try to add it to the DOM, the width appears to be undefined. Here is my code snippet. class Renderer extends HTMLCanvasElement { constructor() { super(); } } customElements.def ...

javascripthtmlcanvascustom-element