Tips for positioning text in front of images

This is the code I am currently working with:

.left-ul {
          margin-left: 10px!important;
          display: inline-block!important;
          vertical-align: top;
          width: 350px;
        }

        .iconic {
          padding: 2%!important;
          color: #111!important;
          font-size: 16px!important;
        }

        li {
          display: list-item;
          text-align: -webkit-match-parent;
        }
        
      
<div id="news">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-4 text-center">
                <img src="images/prof.jpg" style="width:90%;">
              </div>

              <div class="col-md-8 price-grid feature-list">
                <legend>
                  <h2>Highlights of the Program</h2>
                </legend>

                <ul class="left-ul">
                  <img src="images/thumb.png" style="width:55px; height:55px;">
                  <li class="iconic">Industry experts as faculty and guest lecturers</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        
      

I want to display the following text in front of the image:

Industry experts as faculty and guest lecturers

but the text appears below the images. I am struggling to align the text properly in front of the image.

I have attempted using the text-align property, but it has not yielded the desired result so far.

If you need any additional files or information, please feel free to reach out to me.

Answer №1

To align the image to the right, you can use the CSS property float: right;:

.left-ul {
  margin-left: 10px!important;
  display: inline-block!important;
  vertical-align: top;
  width: 350px;
}

.iconic {
  padding:2%!important;
  color:#111!important;
  font-size:16px!important;
}
.left-ul > img {
  float:right;
}
<div id="news">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 text-center">
        <img src="images/prof.jpg" style="width:90%;">
      </div>
      <div class="col-md-8 price-grid feature-list">
        <legend>
          <h2>Highlights of the Program</h2>
        </legend>
        <ul class="left-ul">
          <img src="images/thumb.png" style="width:55px; height:55px;">
          <li class="iconic">Industry experts as faculty and guest lecturers</li>
        </ul>
      </div>
    </div>
  </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

Creating a single div to influence the height of surrounding divs

Here is a fiddle you can check out: http://jsfiddle.net/thiswolf/RGe24/3/ to see the image div and the orange and middle divs stretch to match its height without padding the orange box towards the bottom. Here is the HTML code: <section class="les_hea ...

A guide to replacing or customizing standard components in ReactJS

I need to modify the color property of a common component so I can use it elsewhere. const ViewAllIcon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 ...

Designing a dynamic 1-3 column arrangement with Angular for animated content

Let's discuss the current setup: I am in the process of creating a webpage for an application that includes a navigation bar, a footer, and a 3-column body layout. Initially, only one column is visible. This primary column will contain interactive d ...

Display the execution duration on an HTML document

Recently, I created a loan calculator using Javascript and now I'm contemplating on incorporating the time taken for the code to execute into the results. My intention is to have the execution time displayed on my HTML page, but I am unsure of how to ...

The horizontal scroll menu transition in CSS is choppy and lacks smoothness

My goal is to create a seamless transition for the menu. However, when clicking the arrows, the 2nd div appears at the bottom of the 1st div, causing a choppy effect. Below is the code I am currently using: To view my code, please visit: ...

"Is it possible to apply CSS to all HTML elements except for a

I am looking to apply the specified styles to all elements except for a particular class and its descendants. html * { box-shadow: none !important; border: none !important; color: white; } I attempted the following but it did not work as intended: ht ...

Is it achievable to use multi-level :not selectors in CSS / JS querySelector?

I have come across numerous tutorials explaining the use of multiple :not selectors on a single element. However, I have yet to find any examples of using :not selectors on different levels within a single CSS / JS querySelector path. For instance, conside ...

CSS Float/Clear Challenge (Floating elements conflict)

I divided an image into three parts and aligned them to the right, causing text to wrap around them. Here's a glimpse of the HTML code I used: <img src="" style="float: right;"> <img src="" style="float: right; clear: right;"> <img src ...

Issue with displaying elements at intended layering order when parent element has fixed positioning

My web app features both upper and lower elements (div) with a position: fixed. Each element has child popups also with position: fixed. Even though I want to position the popup above its parent element, using z-index doesn't work due to inheritance ...

When a row is selected in Angular UI-Grid, copy the data from that row onto the clipboard

In need of a function to copy an entire row's data to the clipboard with a simple click. I have a Plunker link where I can only copy cell text: http://plnkr.co/edit/EVrB5Ib9ZuqhbAMsV9Eg?p=preview Below is the pseudocode for the Grid Options: $scope ...

What is the most efficient way to evenly separate a CSS3 gradient?

Is there anyone who can assist me in achieving an even gradient break? body { height: 2500px; background: -webkit-linear-gradient(#000000 1%,#FFFFFF 1%,#FFFFFF 13%,#2ecc71 13%,#2ecc71 30%,#3498db 30%,#000000,#FFFFFF,#34495e); } I've been att ...

What is the best way to position my Jchartfx area graph below my gridview?

When my page loads, the graph appears like this. It consistently shows up in the top left corner even though it should be positioned underneath the grid view as intended. var chart1; function createGraph(mpy) { if (mpy == undefined) mpy = 12.00; ch ...

The dialog box in CSS is extending too far down past the bottom of the screen, making it impossible to scroll and click on the buttons located

I am currently working on creating a dialog box with a text area using material UI. Unfortunately, when I input a significant amount of text, the dialog box ends up extending beyond the screen, making it impossible to scroll down to access the buttons. &l ...

Changing text size on the fly with CSS

Here are the HTML and CSS codes I am currently using: HTML : <div> <a href="#">ITALIANO</a> <a href="#">ENGLISH</a> <a href="#">FRANÇAIS</a> <a href="#">DEUTSCH</a> </div> CSS ...

How can I establish the conversion from pixels to em units?

According to a source I found, 1 em is equivalent to 16px. You can read more about it here. Despite setting the font-size to 100% in the body and using font-size: 1em, the standard font size in my Jekyll site remains 12px. Curious? Visit my Jekyll site a ...

The fixed-top navigation bar in Bootstrap obscures the links within the #content

As a student studying software development, I am currently working on a web development project for my class. Utilizing Bootstrap, I have implemented a navbar-fixed-top and structured the body as a table-striped table with each row containing a <a href= ...

Guide to dynamically altering the header logo as you scroll further

I'm attempting to dynamically change the logo in my header based on how far I've scrolled down the page. While I have experimented with libraries like Midnight.js, I specifically need to display an entirely different logo when scrolling, not just ...

Whenever I select the checkbox, it causes my Bootstrap modal pop-up to close unexpectedly

I have created a form in a modal popup with 5 checkboxes where autopostback is set to true. Whenever I click on one of the checkboxes, the modal popup automatically closes. I have also used an update panel and included ScriptManager.RegisterStartupScrip ...

Button for Toggling Audio Play and Pause

Is it possible to create an SVG image that changes color slightly when hovered over, and when clicked toggles to another SVG image that can be switched back to the original by clicking again with the same hover effect? Additionally, when clicked, it should ...

Ensure that the div remains within the viewport

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tit ...