Aligning text to the right within a div that is placed inside an image element

I have a simple structure that looks like this:

<div class="inline">
    <div class="photo-group thumb_wrapper">
      <img  src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU"
           />
      <div class="thumb_icon label-inverse">
        <p class="thumb_icon_content">
                243 x 324    
        </p>
      </div>
      <div class="thumb_time label-inverse" ><p                 class="thumb_time_content">11.41 Kb</p></div>

http://jsbin.com/nomekagojo/3/edit?html,css,output

I am looking to left align the .thumb_icon_content on the image and right align the .thumb_time_content. The challenge is that the image does not always take up 100% of the .photo-group div. If I set width:100% on the image, it will be fine, but I want to display the image without changing its resolution.

How can this be achieved?

Any assistance would be greatly appreciated!

Thank you, Alon

htmlcss

Answer №1

To include content on the image, you must set its position to absolute;

.inline {
  display: inline-block;
  width: auto;
  position: relative;
}
.thumb_icon_content {
  position: absolute;
  top: 0px;
}
.thumb_time {
  position: absolute;
  top: 0px;
  right: 0px;
  left: auto;
}

Answer №2

Here is a simple solution that should work:

 span.image_text {text-align:left;}
 .block {display:block;}

Check out the demo on JSFiddle

display:block; will ensure the parent element does not collapse and wraps neatly around the content.

Answer №3

Consider attempting it this way: View Demo

.inline{
  width:250px;
}
.clear{
  clear:both;
  display:block;
  content:"";
}
.thumb_time_content {float:right;}
 .thumb_icon {float:left;}

Answer №4

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.thumb_wrapper {
    display: table;
}
.thumb-caption{
    display: table;
    width: 100%;
}
.thumb-cell{
    display: table-cell;
    vertical-align: middle;
}
.thumb_time p{
    text-align: right;
}
<div class="inline">
    <div class="photo-group thumb_wrapper">
        
        <div class="thumb-cell">              
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU" />        
       
        
        
        <div class="thumb-caption">
            <div class="thumb_icon thumb-cell label-inverse">
                <p class="thumb_icon_content">243 x 324</p>     </div>
            <div class="thumb_time thumb-cell label-inverse">
                <p class="thumb_time_content">11.41 Kb</p>
            </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

Incorrect Date Range Picker Alignment

I am having trouble with the positioning of a mat date-range-picker calendar inside a component. I have a menu component that calls another component called leave, which contains the mat date range picker calendar. The problem is that when I call the leav ...

htmlangularangular-daterangepicker

Leveraging Excel VBA to manipulate the selection in a dropdown menu on a webpage

Is there a way to select a specific value using Excel VBA? <div class="drpCompanies"> <select class="selectBox homepage selectCompanies" style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px"> <op ...

htmlexcelvba

Calculate the percentage of a specific side for the border-radius using a single radius

I am looking to adjust the border-radius of a div based on its dimensions without creating an elliptical or pill shape effect. For instance, if a div has a width and height of 250px and 35px respectively, the border-radius should be set to 7px. Similarly, ...

cssrounded-corners

Tips for handling line breaks across different platforms within a web application

I am currently developing a Web application and I have encountered some difficulties with the handling of newLine characters. My application allows users to create posts (similar to a forum) using the Markdown language. This means that the content is in p ...

htmlinternet-explorerweb-applicationscross-platformnewline

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

javascripthtmlcsstwitter-bootstrapangularjs

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

Enhance Your Highcharts Funnel Presentation with Customized Labels

I am working on creating a guest return funnel that will display the number of guests and the percentage of prior visits for three categories of consumers: 1 Visit, 2 Visits, and 3+ Visits. $(function () { var dataEx = [ ['1 Vis ...

javascriptjqueryhtmlcsshighcharts

The :before and :after pseudo classes are not displaying properly on the video element

I'm trying to display a title over a video element while it's playing, but I've run into an issue. When using the <video> tag, it doesn't work as expected, however, when I switch it to a <div>, everything works perfectly fin ...

htmlcssvideo

The asynchronous ajax request is leading to a browser freeze

In the HTML page, I have two sets of a and p elements that are initially set to display:none. At the bottom of the page, there is a function being called with their respective ID's and values, which will enable one of them based on certain conditions ...

javascriptjqueryhtmlajax

The header menu is not appearing on the gray bar in Internet Explorer

Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...

htmlcss

Encountering a problem with the persistent JavaScript script

I have implemented a plugin/code from on my website: Upon visiting my website and scrolling down, you will notice that the right hand sidebar also scrolls seamlessly. However, when at the top of the screen, clicking on any links becomes impossible unless ...

javascripthtmlcss

What is the best way to synchronize the scale of images with the tempo of a song?

I just started learning CSS, JS, and HTML and I have a question about scaling an image based on a song. Despite searching through YouTube and various forums, I still haven't found a solution. Any help would be greatly appreciated :) Here is the HTML ...

javascripthtmlcsstransformscale

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

htmlcssangularlayoutangular-material

Troubleshooting issue arising from transferring code from CodePen to a text editor

I've attempted to recreate a Codepen example in my HTML files on my computer, but it's not displaying correctly. While the static layout resembles what appears in Codepen, the background with the moving squares isn't functioning as expected ...

htmlcss

Implementing CSS counter-increment with jQuery

Is there a way to use jQuery to set the CSS counter-increment attribute on ".demo:before" even though jQuery cannot access pseudo elements directly? I recall seeing a suggestion on Stack Overflow about using a data attribute and then referencing that value ...

javascriptjquerycsscountercss-counter

Offspring of a parent with a "flex: 1" attribute and a grandparent with a "min-height" property defying the "width: 100%" rule

Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down? The "Grand child" element is not occupying the full height: body { marg ...

htmlcss

The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file: @font-face { font-family: 'GopikaTwo' !important; src: url('GopikaTwo.eot') !impo ...

androidcssfont-faceandroid-browsercustom-font

Incorporate the "0" character into a PHP JSON call

I am currently working on a PHP page to retrieve data from Forecast.io's API. When looking at the daily view, they represent the days as numbers. I specifically need information for today, which is represented by the number "0." Here is an excerpt of ...

phphtmljsonparsing

JavaScript pause until the DOM has been modified

My current situation involves using a JavaScript file to make changes to the DOM of a page by adding a navigation menu. Following this code, there is another function that further modifies the newly added navigation menu. However, I am facing an issue wher ...

javascriptjqueryhtmldom

What is the best way to transfer table values to a modal in Django?

I am looking to transfer all the values from the specific row to the modal when the edit option is selected in the project. How can I achieve this? Here is the table body code: <tbody class="list form-check-all"> ...

pythonhtmldjangoinheritance