Using CSS to Align Divs Horizontally (Left to Right)

I'm currently working on designing people cards and I am facing some challenges when trying to position the image on the left side and the text on the right side of the card.

https://i.sstatic.net/ljcvv.png

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-lg-3 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.media {
    margin: 20px 0;
    padding: 10px;
    vertical-align: middle;
    display: inline-block;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
<div class="row">
 <div class="col-lg-3">
  <div class="media">
   <div id="left_div">
    <img src="/web/image/hr.employee/7/image">
   </div>
   <div id="right_div">
    <span class="label label-default">Marc Demo
     <hr style="margin: 0em; border-width: 2px;">
    </span>
    <span class="label label-default"> HIPOACUSICOS
     <hr style="margin: 0em; border-width: 2px;">
    </span>
    <span class="label label-default"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08d81928bce82928f978ed2d3a08598818d908c85ce838f8d">[email protected]</a>
     <hr style="margin: 0em; border-width: 2px; display: none;">
    </span>
   </div>
  </div>
</div>

I've attempted to use CSS properties like position, width, and others on "left_div" and "right_div", but I'm struggling to format it correctly. Any suggestions would be greatly appreciated!

Edit: After using display: flex and align-items: center, this is the resulting layout: https://i.sstatic.net/iqHP7.png

Could it be an issue with inherited styles from other parent divs?

Thank you for taking the time to review this!

htmlcss

Answer №1

Apply the display: flex property to the .media class, and then use display: block for the span elements.

Instead of using a presentational tag like <hr>, consider using a border-bottom style.

Keep in mind that if the horizontal space is limited due to a narrow container, you may need to wrap the content as shown in the second example below.

.media {
    display: flex;
    flex-flow: row wrap;
    align-items: center; /* optional */
    margin: 20px 0;
    padding: 10px;
    width: 100%;
    background: #e8e8e8; }
   
.media > div { 
    padding: 10px; }

.media img { 
    vertical-align: middle;
    max-width: 100%;
    width: 200px; }

#left_div {  
    text-align: center;
    flex: 1 0 25%; }

#right_div {
    flex: 3 0 60%; }

.media span {
   display: block;
   padding: 5px 0;
   word-break: break-all;
   word-break: break-word;
   border-bottom: 1px #ccc solid; }
<div class="media">

      <div id="left_div">
          <img src="https://i.sstatic.net/UJ3pb.jpg">
      </div>
   
      <div id="right_div">
          <span class="label label-default">Marc Demo</span>
          <span class="label label-default"> HIPOACUSICOS </span>
          <span class="label label-default"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb969a8990d59989948c95c8b9e839a968b97cc818d85">[email protected]</a> </span>
      </div>

 </div>
 
 
 <!-- example with narrow parent -->

 <div style="width: 200px;">

     <div class="media">
 
        <div id="left_div">
            <img src="https://i.sstatic.net/UJ3pb.jpg">
        </div>
   
        <div id="right_div">
            <span class="label label-default">Marc Demo</span>
            <span class="label label-default"> HIPOACUSICOS </span>
            <span class="label label-default"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="B2DFD3C0D99CD0C0DDC5DC8081F2D7CAD3DFC2DED79CD1DDDF">[email protected]</a> </span>
        </div>
     </div>

 </div>

Answer №2

To simplify this task, consider utilizing flexbox CSS property. Transform the parent element, .media, into a flex container and apply align-items: center in place of vertical-align: middle.

UPDATE

I have made adjustments to display 2 "profile cards" side by side. In this process, I converted left_div and right_div from IDs to classes and set a width of 40% for left_div.

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-lg-3 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  display: flex;
}

.media {
  margin: 20px 0;
  padding: 10px;
  display: flex;
  align-items: center;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  background-color: #ddd;
  margin-right: 15px;
}

.left_div {
  width: 40%;
  margin-right: 15px;
}

.right_div {
  width: 60%;
}

img {
  width: 100%;
  height: auto;
}
<div class="row">
  <div class="col-lg-3">
    <div class="media">
      <div class="left_div">
        <img src="https://i.sstatic.net/UJ3pb.jpg">
      </div>
      <div class="right_div">
        <span class="label label-default">Marc Demo
          <hr style="margin: 0em; border-width: 2px;">
        </span>
        <span class="label label-default"> HIPOACUSICOS
          <hr style="margin: 0em; border-width: 2px;">
        </span>
        <span class="label label-default"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09d91829bde92829f879ec2c3b09588919d809c95de939f9d">[email protected]</a>
          <hr style="margin: 0em; border-width: 2px; display: none;">
        </span>
      </div>
    </div>
    <div class="media">
      <div class="left_div">
        <img src="https://i.sstatic.net/UJ3pb.jpg">
      </div>
      <div class="right_div">
        <span class="label label-default">Some one
          <hr style="margin: 0em; border-width: 2px;">
        </span>
        <span class="label label-default"> Barbar
          <hr style="margin: 0em; border-width: 2px;">
        </span>
        <span class="label label-default"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5c4f585b487a5f425b574a565f14595557">[email protected]</a>
          <hr style="margin: 0em; border-width: 2px; display: none;">
        </span>
      </div>
    </div>
  </div>
</div>

Answer №3

If you want to achieve this layout, consider utilizing flexbox. It is also advisable to use classes instead of IDs for better CSS specificity.

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-lg-3 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.media {
    margin: 20px 0;
    padding: 10px;
    display: flex;
}
.media > div{
  display: flex;
  justify-content: center; 
  flex-direction: column;
}

.media .right_div{
  padding: 10px;
}
<div class="row">
 <div class="col-lg-3">
  <div class="media">
   <div class="left_div">
    <img src="https://placehold.it/200x200">
   </div>
   <div class="right_div">
    <span class="label label-default">Marc Demo
     <hr style="margin: 0em; border-width: 2px;">
    </span>
    <span class="label label-default"> HIPOACUSICOS
     <hr style="margin: 0em; border-width: 2px;">
    </span>
    <span class="label label-default"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef828e9d84c18d9d809881dddcaf8a978e829f838ac18c8082">[email protected]</a>
     <hr style="margin: 0em; border-width: 2px; display: none;">
    </span>
   </div>
  </div>
</div>

Answer №4

If you're looking to fine-tune the styles without a specific design, consider adding "display: flex;" to the .media rules.

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col-lg-3 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.media {
    margin: 20px 0;
    padding: 10px;
    vertical-align: middle;
    display: inline-block;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    display: flex;
    flex-flow: row nowrap;
}

/* Customize the flex items here for spacing and styles adjustments */
.media .left_div {
  flex: 1;
}

.media .right_div {
  flex: 1;
}
<div class="row">
 <div class="col-lg-3">
  <div class="media">
   <div class="left_div">
    <img src="/web/image/hr.employee/7/image">
   </div>
   <div class="right_div">
    <span class="label label-default">Marc Demo
     <hr style="margin: 0em; border-width: 2px;">
    </span>
    <span class="label label-default"> HIPOACUSICOS
     <hr style="margin: 0em; border-width: 2px;">
    </span>
    <span class="label label-default"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac7cbd8c184c8d8c5ddc49899eacfd2cbc7dac6cf84c9c5c7">[email protected]</a>
     <hr style="margin: 0em; border-width: 2px; display: none;">
    </span>
   </div>
  </div>
</div>

I've made adjustments to use classes instead of IDs for left_div and right_div in your HTML code as using an ID multiple times on a page is not recommended.

Answer №5

To style the elements within .media, apply display: flex like so:

.media {
    display: flex;
    align-items: center;
    margin: 20px 0;
    padding: 10px;
    vertical-align: middle;
    display: inline-block;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

If the data is extending beyond the container, you can either add overflow-x: auto; or switch the col-lg-3 to a wider class.

Answer №6

Include flex in the media class like so:

.media {
    display: flex;
}

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

tips for understanding the contents of the upcoming css class

I am working with a CSS class that looks like this: #menuAccordion h2 a,.dir-rtl #menuAccordion .viewList{ padding-right:2.5%; padding-left:0 } Is it correct to assume that for any HTML elements using the menuAccordion class, if there is an & ...

css

A guide on passing parameters from ui-sref in ui-router to the controller

Is there a way to pass and receive two parameters when transitioning to a different state using ui-sref in ui-router? For example, how can I transition to the home state with both foo and bar parameters like this: <a ui-sref="home({foo: 'fooV ...

javascripthtmlangularjsangular-ui-routerangular-ui

I am currently utilizing VScode and attempting to connect to an asset, but I noticed that two characters in the link appear yellow instead of orange. What could

Could the usage of a Bootstrap CDN be the reason for this issue? Although it was an easy fix, I am still curious. Was it caused by simply copying and pasting the code? ...

cssvisual-studio-codebootstrap-4

Negative margin causes content to conceal itself

I'm facing an issue with using a negative margin for positioning a label. The label is not showing up as expected. Specifically, I need to place a search box on a blue background but when applying a negative margin, the search box does not appear prop ...

css

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

When working with a component, I have included the angular i18n attribute like so: <app-text i18n="meaning|description"> DeveloperText </app-text> I am trying to retrieve this property. I attempted using ElementRef to access nativeElement, bu ...

javascripthtmlangulartypescript

Incorporating custom HTML5 player to watch Youtube videos on my website

I'm trying to display YouTube videos on my website using a simple video tag. I've managed to retrieve the encoded url of the video from the page source and successfully download it through IDM, but when I try to use this URL as the source for an ...

javascriptphphtmlvideoyoutube

Adaptable Design for Smartphones

Currently in the process of creating a website for my brother with Joomla 3.4 and Bootstrap. This marks my first venture into building a responsive site, so I'm seeking guidance on essential elements to include in my CSS such as font sizes in specific ...

csstwitter-bootstrapmedia-queriesjoomla3.0

Exploring the world of mathematics using JavaScript, adjusting the range input, and applying CSS transform with scale()

In my project, I have a container div set to a width of 794px and a range input with a maximum value of 250 and a minimum of 0. I am using CSS transform property like this: scale(1), where the scale is equivalent to 794px. The challenge arises when the br ...

javascripthtmlcssrange

Utilizing Several Pop-up Windows on a Single Page

I am currently working on a website feature where users can click on an image to open a modal window with menu items inside. However, while the first modal functions properly, subsequent modals do not. Here is the JavaScript code I am using: <script&g ...

javascripthtmlwebbootstrap-modal

Navigating between child nodes in an HTML drop down list with multiple options and hierarchical structure

Hey there! I am looking to create a unique HTML hierarchy drop-down menu. It will have multiple levels or options, with each option having the potential for child nodes. When an option has child nodes, an arrow will appear next to it. Clicking on this ar ...

javascriptjqueryhtmlcss

The value calculated by Auto does not display as a valid number in Angular 8 until it has been manually edited

Having an issue with a form submission for invoicing. The total value field, which is auto-calculated based on quantity and unit price, does not show up as numeric data in the backend onSubmit event unless I manually interact with it by adding something ...

htmlangular

Is there a way to verify the location of an element?

Currently, I am attempting to monitor the position of the 'car'. When the car reaches a top offset of 200px, I would like to apply a specific property to the 'phone' element. The concept is that as you scroll down, the car will move, an ...

javascriptjqueryreactjsperformancecss

Is it possible to trigger a modal to open automatically after a 3-second delay?

code: <script> $(document).ready(function() { setInterval(function() { $('#contact').modal(); }, 3000); }); </script> html code: <a href="#contact"><h4><i class="fa f ...

phphtmlcss

The PHP script is failing to send out email notifications

I am facing an issue with my website's contact form that is supposed to send out an email after the user fills it out and clicks submit, but it does not appear to be working. Unfortunately, I do not have access to the mail server since it is hosted e ...

phphtml

How to incorporate a background image using CSS in Ruby on Rails 2

I created a scaffold using ruby and now I'm trying to add a background image to all pages of the website. However, I am uncertain about what the correct image link should be. The image is located in app/assets/images/"dep.jpg" This is what I have at ...

ruby-on-railscssbackground-image

Assigning a style class to the material-menu component in Angular 2+ is not possible at this

Is there a way to apply a style class to mat-menu elements? I've tried various methods, but it seems like the styles are only visible when inspected using Chrome. HTML <mat-menu class="matMenuColor" #menu="matMenu"> <form #logoutForm ng ...

htmlcssangularangular-material

Issue with custom function not being triggered by datepicker onSelect in Internet Explorer with JQuery

I have a datepicker set up like this: $("#startDate").datepicker({ onSelect: changeDate }); This is used with the following input field: <input type="text" id="startDate" value="" class="dateField"/> This setup works well in Chrome, but encou ...

javascriptjqueryhtml

Ways to eliminate additional margins caused by CSS scaling

I am trying to display an external website within an iframe, but the site is too large and I need to scale it down to fit. However, when I use the CSS scale property, it creates a large margin around the content. Does anyone have suggestions on how to reso ...

htmlcssiframe

Tips for extracting text with selenium

I'm struggling to extract the address of this website using selenium: page My attempt to do so was with the following code: address = driver.find_element_by_css_selector('main-content-cell.p-bottom').text print(address) Unfortunately, wh ...

htmlseleniumselector

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

javascriptcssgoogle-maps