-1

How to make this div starts after the picture. It starts from the beginning of the container. I have added /float: left;/ in profile image.

enter image description here

HTML and CSS Code:

.profile{
    border: 1px solid #ddd;
    padding: 22px;
    min-height: 150px;
}
.profile img{
    max-width: 150px;
    width: 100%;
    float: left;
}
.profile #details{
    margin-left: 50px;
}
<section class="profile">
        <img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
        <div id="details">
        <h1>Name</h1>
        <h2>Age</h2>
        <h3>City, Country</h3>
        </div>
    </section>
Hasnain Ali
  • 5
  • 1
  • 7
  • 1
    Provide the required html, css to produce the minimum output which demonstrates the problem you're having. –  Dec 25 '17 at 14:19
  • @hasnain Ali use `display:inline-flex` to div that containt two div you want to make inline – Mourad Karoudi Dec 25 '17 at 14:24
  • @MouradKaroudi 'display: inline-flex' worked for me but it increases the height of the box. Check here: https://imgur.com/yLwCPzo – Hasnain Ali Dec 25 '17 at 14:29
  • @HasnainAli Update your answer with your html & css code to help you – Mourad Karoudi Dec 25 '17 at 14:32
  • Possible duplicate of [How to align 3 divs (left/center/right) inside another div?](https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div) – Temani Afif Dec 25 '17 at 14:41

1 Answers1

0

This code should work for you 

.my-profiles {
    border: 1px solid #b2cbe3;
    padding: 22px;
    font-family: arial;
    display: inline-block;
}
.my-profiles img{
 max-width: 100px;
 width: 100%;
 border-radius: 50%;
 float: left;
}
.my-profiles .details {
    overflow-x: hidden;
    padding-top: 10px;
    padding-left: 8px;
    display: inline-block;
}
.my-profiles .details * {
    margin: 0px;
    font-size: 22px;
    font-weight: 200;
}
<div class="my-profiles">
    <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
    <div class="details">
     <h2>Name</h2>
     <h2>Age</h2>
     <h2>City, Country</h2>
    </div>
</div>
M. Hanafi
  • 66
  • 1
  • 11