Positioning divs (left-right) with CSS [duplicate] - html

Question

This question already has answers here:
CSS Float: Floating an image to the left of the text
(7 answers)
Align image to left of text on same line - Twitter Bootstrap3
(6 answers)
Wrap text around an image on bootstrap 3
(6 answers)
Closed 3 years ago.
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!

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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.

Answer 5

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

Answer 6

Add flex to media class as below
.media {
display: flex;
}