What are the best techniques for positioning text next to images in HTML and CSS?

I have attempted to position the text in close proximity to the images as shown in the picture below (to allow for spacing in the middle). As depicted in the image, the "AVENUE FOR GROWTH" and "NETWORKING OPPORTUNITIES" texts are near Man's hand and wallet pictures respectively. Therefore, I need to devise a way to adjust those texts closer to their respective images. More specifically towards the left side.

https://i.sstatic.net/m6vby.jpg

Below is the complete Html and CSS of the page:

/* img {
    -webkit-filter: grayscale(100%) contrast(110%) blur(1px); Chrome, Safari, Opera
/*     filter: grayscale(100%); */
.test {
  width: 100%;
  height: 700px;
  background-size: cover;
  background-image: url('//ehealth4everyone.com/wp-content/uploads/2019/07/Group-510.jpg');
  text-align: center;
}

.clapimg{
  max-width:70%;
  float:left;
  padding:10px;
}

.clapimg2{
  max-width:30%;
/*   float:right; */
  padding:10px;
  border-radius:50px;
}

.content{
  margin-top:20%;
  margin-left:20%;
  color:white !important;
  text-align:justify;
}

.btn-default{
  background-color: #ffffff !important;
  color:black;
}

.button{
    background-color: #2372B7;
    color: white;
    display: block;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    width: 100px;
    text-align: center;
    border-radius: 5px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #2372B7;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.drop {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #2372B7;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
<p>[vc_row][vc_column][vc_column_text]</p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="test">
<div class="row">
<div class="col-md-6">
<div class="content">
<h1 style="color:white; font-weight:bolder; line-height: normal;">HEALTH TECH</h1>
...

htmlcss

Answer №1

Check out this code and update me once you're done

.test {
  width: 100%;
  height: 700px;
  background-size: cover;
  background-image: url('//ehealth4everyone.com/wp-content/uploads/2019/07/Group-510.jpg');
  text-align: center;
}

.clapimg{
  max-width:70%;
  float:left;
  padding:10px;
}

.clapimg2{
  max-width:30%;
/*   float:right; */
  padding:10px;
  border-radius:50px;
}

.content{
  margin-top:20%;
  margin-left:20%;
  color:white !important;
  text-align:justify;
}

.btn-default{
  background-color: #ffffff !important;
  color:black;
}

.button{
    background-color: #2372B7;
    color: white;
    display: block;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    width: 100px;
    text-align: center;
    border-radius: 5px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #2372B7;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.drop {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #2372B7;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
body {
    overflow-x: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="test">
                    <div class="row">
                       <div class="col-md-6">
                          <div class="content">
                             <h1 style="color:white; font-weight:bolder; line-height: normal;">HEALTH TECH</h1>
                             <h2 style="color:white; font-weight:300; line-height: normal;">INTERNSHIP</h2>
                             <p style="color:white; font-weight:300; font-size: 20px; padding-top:5%;">Seeking  to  develop  technical  skillset  for  innovation<br />in the health sector? Then this internship is for you.</p>
                             <p><a class="btn btn-default" href="//ehealth4everyone.com/health-tech-form/" target="_blank" rel="noopener noreferrer" style="color:black; font-weight:bold;">APPLY HERE</a>
                          </div>
                       </div>
                    </div>
                 </div>
                 <div class="container" style="padding-top:5%">
                    <p style="text-align:left; color:black; font-weight:300; font-size: 20px;">
                       We are looking for individuals who are result-oriented, goal-driven, self-motivated, focused and are seeking to develop their skillset through hard work and commitment.
                 </div>
                 <div class="container" style="padding-top:5%; padding-bottom:5%;">
                    <div class="row">
                       <div class="col-md-6">
                          <div class="row">
                             <div class="col-md-6">
                                <img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-8.jpg" class="clapimg">
                             </div>
                             <div class="col-md-6">
                                <h6 style="color: black; font-weight: bold; font-size: 17px;">AVENUE FOR GROWTH</h6>
                                <p style="text-align:left; color:black; font-weight:300; font-size: 15px;">We are providing the opportunity for personal and career growth through mentorship and coaching.
                             </div>
                          </div>
                       </div>
                       <div class="col-md-6">
                          <div class="row">
                             <div class="col-md-6">
                                <img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-9.jpg" class="clapimg">
                             </div>
                             <div class="col-md-6">
                                <h6 style="color: black; font-weight: bold; font-size: 17px;">JOB OPPORTUNITIES</h6>
                                <p style="text-align:left; color:black; font-weight:300; font-size: 15px;">After the internship, successful interns would be given the opportunity to join our team<br><br />
                             </div>
                          </div>
                       </div>
                    </div>
                    <div class="row">
                       <div class="col-md-6 ">
                          <div class="row">
                             <div class="col-md-6 col-sm-12">
                                <img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-10.jpg" class="clapimg">
                             </div>
                             <div class="col-md-6 col-sm-12">
                                <h6 style="color: black; font-weight: bold; font-size: 17px; padding-top:5%;">NETWORKING OPPORTUNITIES</h6>
                                <p style="text-align:left; color:black; font-weight:300; font-size: 15px;">We are providing a platform and the opportunity to work with others in your field and make meaningful connections.
                             </div>
                          </div>
                       </div>
                       <div class="col-md-6 col-sm-12">
                          <div class="row">
                             <div class="col-md-6">
                                <img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-11.jpg" class="clapimg">
                             </div>
                             <div class="col-md-6 col-sm-12">
                                <h6 style="color: black; font-weight: bold; font-size: 17px; padding-top:5%;">PERFORMANCE-BASED STIPENDS</h6>
                                <p style="text-align:left; color:black; font-weight:300; font-size: 15px;">Stipends would be given to interns based on task completion and weekly performance.
                             </div>
                          </div>
                       </div>
                    </div>
                 </div>
                 <div class="container-fluid">
                 <div class="row" style=" background-color:#efefef; padding-top:5%; padding-bottom:5%;">
                    <div class="container">
                       <h3 style="color: black; font-weight: bold; font-size: 20px;">AREAS OF SPECIALIZATION</h3>
                       <div class="row" style="margin: 0 auto;">
                          <div class="col-md-4">
                             <div>
                                <p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-516.jpg" class="clapimg2" style="color: black; font-weight: 400;">PROGRAMMING
                             </div>
                          </div>
                          <div class="col-md-4">
                             <div>
                                <p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-515.jpg" class="clapimg2">DESIGN
                             </div>
                          </div>
                          <div class="col-md-4">
                             <div>
                                <p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-514.jpg" class="clapimg2">DEV-OPS
                             </div>
                          </div>
                       </div>
                       <div class="row" style="margin: 0 auto;">
                          <div class="col-md-4">
                             <div>
                                <p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-511.jpg" class="clapimg2">DATA
                             </div>
                          </div>
                          <div class="col-md-4">
                             <div>
                                <p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-512.jpg" class="clapimg2">PUBLIC HEALTH
                             </div>
                          </div>
                          <div class="col-md-4">
                             <div>
                                <p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-513.jpg" class="clapimg2">SOFTWARE TESTING
                             </div>
                          </div>
                       </div>
                    </div>
                 </div>
                </div>
                <div class="container">
                 <div class="row">
                    <div class="col-md-6">
                       <h3 style="color: black; font-weight: bold; font-size: 20px;">WHO CAN APPLY</h3>
                       <p style="color:black; font-weight:300; font-size: 17px;">Absolutely ANYONE interested in learning<br />under any of the areas of specialization listed<br />above. No prior knowledge is required.<br />Just come willing to learn and work hard.
                    </div>
                    <div class="col-md-6">
                       <h3 style="color: black; font-weight: bold; font-size: 20px; float: right; text-align: right;">INTERNSHIP REQUIREMENTS</h3>
                       <ul style="color:black; font-weight:300; font-size: 17px; float: right; text-align: right; list-style: none">
                          <li>A Computer (preferably a Laptop)</li>
                          <li>A working internet connection</li>
                          <li>The willingness to learn</li>
                       </ul>
                    </div>
                 &nbsp; 
                 <div class="container">
                     <div class="row">

                     
                 <button class="collapsible" style="border-radius:5px;">RULES</button>
                 <div class="drop">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
                 &nbsp;
                 <button class="collapsible" style="border-radius:5px;">FAQ</button>
                 <div class="drop">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
                 &nbsp;
                 <a href="//ehealth4everyone.com/health-tech-form/" target="_blank" rel="noopener noreferrer" style="margin:auto; text-align:center; display:block; font-weight:bold;" class="button">APPLY HERE</a>
                </div>
            </div>

Answer №2

To resolve this issue, you can implement a CSS Margin solution. An effective inline adjustment that may not be universally applicable for all divs is as follows:

<div class="col-md-6" style="margin-left:5em">
          <img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-9.jpg" class="clapimg"></div>

as well as

<div class="col-md-6" style="margin-left:5em">
          <img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-11.jpg" class="clapimg"></div>

Ensure to adjust the value of "em" accordingly.

If needed, consider adding margin to clapimg in order to address this issue across all images with the same class, like so (instead of using the div fix).

.clapimg{
  max-width:70%;
  float:left;
  padding:10px;
  margin:5em;
}

.clapimg2{
  max-width:30%;
/*   float:right; */
  padding:10px;
  border-radius:50px;
  margin:5em;
}

You have the option to convert "em" to "px" if desired, but it's worth noting that "em" allows for scalability based on different browser dimensions compared to the fixed size of "px."

For a detailed explanation on margins and padding, refer to this SO post.

Answer №3

After experimenting with the 5em margin setting, I found that it resulted in a disorganized layout outcome

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

What makes the nav class different from the navbar class in Bootstrap?

Recently, I delved into learning about bootstrap and web development. To my surprise, I stumbled upon the nav and navbar classes in bootstrap 4. I'm curious to know what sets them apart from each other and when it's best to use one over the other ...

htmlcsstwitter-bootstrapnavbarnav

Express will be used to return empty values to an array

I am currently in the process of learning how to use express, so I am relatively new to it. I am facing an issue where I am trying to send data from a form I created to an array, but unfortunately, it is adding empty values to the array. The values are dis ...

htmlnode.jsexpressejs

Facing challenges with parsing JSON files in an Angular 2+ application

Utilizing the Angular CLI, I have configured this project with the standard folder layout. My goal is to practice reading a JSON file from src/app/assets/items.json and then using it to display these items in the HTML. items.json: { "results": [ ...

htmlangularweb-applicationsdependency-injectionsingle-page-application

Is it possible for two Bootstrap icon class names to be used sequentially with one taking precedence over the other?

I am having an issue with toggling a class name in my code. I have a class named (bi bi-clipboard) and I want to change it to (bi-clipboard-check) when it is clicked. However, the problem is that the new class name gets added next to the existing one like ...

javascripthtmlcssbootstrap-5

Is there a discrepancy in height between Chrome's mobile emulator and the iPhone simulator?

Currently, I am conducting a layout test for a PhoneGap application using the Framework7 framework across the Chrome mobile emulator (iPhone 6) and Xcode iOS simulator. However, I am facing difficulties with aligning the vertical layout on both simulators. ...

cssiphonecordovagoogle-chromehtml-framework-7

jQuery is an excellent tool for implementing drag and drop folder upload functionality, all without

I am creating a drag and drop file uploader with basic functionality. Here is the code: HTML: <div class="drop-box drop-area"> <form enctype="multipart/form-data" id="yourregularuploadformId"> <input type="file" name="files[]" ...

javascriptjqueryajaxhtmljquery-file-upload

Executing jQuery on page update can be achieved by utilizing event handlers to trigger

I have implemented jQuery multi-select to enhance the user experience of my Django app's multiselect feature. Upon initially rendering my page, I included the following script to bind any elements with the class 'multiselect' to the jQuery m ...

javascriptjquerypythonhtmldjango

Checkbox failing to trigger

Check out my code snippet here: http://jsfiddle.net/raficsaza/mgukxouj/ I'm facing an issue with the checkbox in this code. It seems to be stuck at a false value and I can't get it to change. Is there a way to work with the "input" tag instead o ...

htmlcsscheckbox

Enhancing your website with HTML5 Audio Player's Next and Previous functionalities

I've successfully created a playlist that is working, but I'm struggling to make the Next and Previous Buttons actually move forwards and backwards in the playlist. It seems like using the playNext function when next is clicked might work, but I ...

jqueryhtmlhtml5-audio

Display issue with grid-template-column not appearing

My grid column isn't working in my Christmas matching game project. I'm trying to create additional card columns using grid template columns, but the other three columns are not displaying as intended. They should be positioned right next to "Tim ...

htmlcss

"Enhance User Interaction with a Bootstrap Popup when Submitting Form Data via

As a junior web master, I have a simple question to ask. I have created a single page application for a client with a contact form at the end of the page. The validation is done using Bootstrap, but the only method I know to send the form data to a mail id ...

javascriptphpjqueryhtmltwitter-bootstrap

Format the image to fit within a div container

I'm currently utilizing Bootstrap and am looking to insert some images into my div while ensuring they are all the same size (standardized). If the images are too large (as they typically are), I want to resize them to fit within my div and crop them ...

javascriptjqueryhtmlcsstwitter-bootstrap

Copying content from one website to another using JavaScript

Currently, I am working on a website which stores data and I require assistance in transferring this data to another site. If you have any suggestions using Javascript or other methods, please let me know. ...

javascripthtmlajaxweb

Switch between Light and Dark Modes effortlessly with just one button

I've created a code that effortlessly switches between light mode and dark mode with the press of buttons. However, I'm looking to combine these two functionalities into a single toggle button for ease of use. If anyone can provide insight on how ...

javascripthtml

Can content be easily added to the header section of numerous HTML files simultaneously, eliminating the need to access each file individually?

I'm facing a challenge where I have to include a stylesheet in numerous HTML files. It seems like such a tedious task to do it manually for each file. Are there any tools or solutions available that can assist me with this process? Or perhaps there ar ...

htmlcssstylesheet

IE causing Ul LI Menu to not display as Block

I'm encountering an issue with my menu. It displays correctly in Firefox and Chrome, but in IE8 it appears as a vertical list instead of a horizontal menu. I have included a doctype and I am linking to the HTML5 JavaScript via Google, so I'm not ...

htmlcssinternet-explorerhtml-lists

``The issue concerning the preloading layer on the website``

My experience with the website www.wirecreation.net is sometimes marred by an issue during the initial load. It seems that there is a margin of a few pixels on the gray div containing the logo and progress bar at times, but other times it appears with zero ...

javascripthtmlcsspreload

What are the reasons behind the ineffectiveness of !important in CSS?

I am looking to increase the font-size of all text on my website to 200%, you can find some test code in this Fiddle link. If it is a PX issue, why does the code work when I add the style to "<h2>"? <div> <h2 class="test" style="font-size: ...

htmlcss

Steps for transferring an `<li>` element from one `<ul>` to another

<ul id="List"> <li class="li">1</li> <li class="li">2</li> </ul> <ul id="List2"></ul> const items = document.querySelectorAll(".li"); for(var i = 0; i < ...

javascripthtmljquery

jQuery-powered responsive layout with three columns

I am currently working on creating a dynamic three-column layout that allows users to resize the columns in their browser. Using jQuery for column resizing, I have successfully adjusted the first two columns but am encountering difficulties with the final ...

jquerycssdynamicresponsive-designmultiple-columns