Positioning divs (left-right) with CSS

Question

I'm designing people cards and I need to positionate the image on the left side and the text on the right side but I'm having issues doing it.

.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">mark.brown23@example.com
     <hr style="margin: 0em; border-width: 2px; display: none;">
    </span>
   </div>
  </div>
</div>

I'm trying to use position, width and another properties on "left_div" and "right_div" but I'm not able to format it. Any suggestion?

Edit: Using display: flex and align-items: center this is the result of it:

Maybe the problem are the inherited styles of other parent divs?

Thanks for reading!

add display:flex; on .media div check how flex works on this link https://www.w3schools.com/css/css3_flexbox.asp — Edin Puzic, Feb 04 '20 at 10:02
Edited, and not working thought about the parent styles. Thanks for reply. @EdinPuzic — arevilla009, Feb 04 '20 at 10:10
Please share the relevant part of your general layout CSS. People that answer cannot guess what are your "parent styles" — Kaddath, Feb 04 '20 at 10:24

Fabrizio Calderan · Answer 1 · 2020-02-04T10:32:40.270

Use display: flex on .media, then use display: block on span elements

You could also avoid to use a presentational tag (<hr>) and use a border-bottom.

Note that if the horizontal space is not enough due to a narrow container you need to wrap the content as in my second example.

.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.stack.imgur.com/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">mark.brown23@example.com </span>
      </div>

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

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

     <div class="media">
 
        <div id="left_div">
            <img src="https://i.stack.imgur.com/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">mark.brown23@example.com </span>
        </div>
     </div>

 </div>

Edited, and not working thought about the parent styles. Thanks for reply. @Fabrizio Calderan — arevilla009, Feb 04 '20 at 10:10

djolf · Answer 2 · 2020-02-04T10:59:39.380

Easiest way to do this is to use flexbox. Make the parent, .media, a flex container, and align-items: center replacing vertical-align: middle

EDIT

I've edited my answer to show 2 "profile cards" side by side. In doing so, I've changed left_div and right_div into classes instead of id, and gave left_div a 40% width.

.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.stack.imgur.com/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">mark.brown23@example.com
          <hr style="margin: 0em; border-width: 2px; display: none;">
        </span>
      </div>
    </div>
    <div class="media">
      <div class="left_div">
        <img src="https://i.stack.imgur.com/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">fubar@example.com
          <hr style="margin: 0em; border-width: 2px; display: none;">
        </span>
      </div>
    </div>
  </div>
</div>

Edited, and not working thought about the parent styles. Thanks for reply. @djolf — arevilla009, Feb 04 '20 at 10:11
I've edited my answer to show how to show 2 divs, and added grey background. — djolf, Feb 04 '20 at 10:54

Nipun Jain · Answer 3 · 2020-02-04T10:13:54.713

0

You can use display: flex to .media like this:

.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;
}

Also as I can see data getting out of container. You can use overflow-x: auto; or changing col-lg-3 to some larger classes

edited Feb 04 '20 at 10:13

answered Feb 04 '20 at 10:04

Nipun Jain

999
6
13

score 0 · Answer 4 · edited Feb 04 '20 at 12:04

0

Add flex to media class as below

.media {
    display: flex;
}

edited Feb 04 '20 at 12:04

Duke

3,226
1
18
23

answered Feb 04 '20 at 10:04

PDSSandeep

179
10

Edited, and not working thought about the parent styles. Thanks for reply. @PDSSandeep – arevilla009 Feb 04 '20 at 10:11
Please add some text to explain your code. This site doesn't like code-only answers, and they are put on review to see if they should be deleted. In the future someone may delete it if you don't explain the answer a bit. – clearlight Feb 04 '20 at 11:08

score 0 · Answer 5 · answered Feb 04 '20 at 10:04

You could use flexbox for doing this stuff. Also, I would recommend using classes instead if id's because of 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">mark.brown23@example.com
     <hr style="margin: 0em; border-width: 2px; display: none;">
    </span>
   </div>
  </div>
</div>

Edited, and not working thought about the parent styles. Thanks for reply. @Christophe Vanassche — arevilla009, Feb 04 '20 at 10:11

score 0 · Answer 6 · answered Feb 04 '20 at 10:07

You could try a few things here - difficult to get the exact styles right without the design, but you could simply add "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;
}

/* You can customise the flex items here to adjust the spacing/styles etc. */
.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">mark.brown23@example.com
     <hr style="margin: 0em; border-width: 2px; display: none;">
    </span>
   </div>
  </div>
</div>

I've also changed your HTML to use classes instead of IDs for left_div and right_div, as really an ID should not be used more than once on a page.

Edited, and not working thought about the parent styles. Thanks for reply. @Zach Townsend — arevilla009, Feb 04 '20 at 10:11

Positioning divs (left-right) with CSS

6 Answers6