CODEWITHSUNDEEP
htmlcssflexbox
Wayne
Wayne

Reputation: 156

Flexbox: Image forcing list items out of container

Using flexbox can you wrap text around an image? The image .avatar is forcing the list at the bottom, .user_contact_details out of the containing div. If I change the image size then it brings the text back in, but I can't do that.

Thanks

    body {
      font-size: 16px;
      font-family: 'Arial';
      margin: 10px;
    }
    .profile_card_container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 255px;
      height: 150px;
      padding: 10px;
      border: 1px solid #d3d3d3;
      box-shadow: 2px 2px 2px 2px #ededed;
    }
    .user_name {
      font-family: 'Arial';
      color: #2f353f;
    }
    .user_job_title {
      font-size: 12px;
      color: #72bcd4;
    }
    .user_contact_details {
      font-size: 12px;
    }
    .user_contact_details ul {
      list-style-type: none;
    }
    .user_contact_details ul li i {
      font-size: 12px;
      color: #72bcd4;
      padding-right: 10px;
    }
    .user_contact_details ul li a {
      text-decoration: none;
      font-size: 12px;
      color: #72bcd4;
    }
    .avatar {
      float: right;
      width: 106px;
      height: 106px;
      background-color: blue;/*just for snippet*/
      /*url('images/avatar.png') no-repeat;*/
    }
<body>
  <div class="profile_card_container">
    <div class="user_details">
      <span class="user_name">User Name</span>
      <br /><span class="user_job_title">Job Title</span>
    </div>
    <div class="avatar">
    </div>
    <div class="user_contact_details">
      <ul>
        <li><i class="fa fa-map-marker"></i>&nbsp;&nbsp;Location</li>
        <li><i class="fa fa-phone"></i>&nbsp;0101 101 01 01</li>
        <li><i class="fa fa-envelope-o"></i><a href="mailto:[email protected]">[email protected]</a>
        </li>
      </ul>
    </div>
  </div>
</body>

Upvotes: 1

Views: 143

Answers (2)

Asons
Asons

Reputation: 87191

flex doesn't wrap text around image, so I removed it and just made a minor markup change where I moved your avatar to be the first child.

By adding padding to the user contacts and its item it now looks like the layout in your image.

Based on the markup structure, the outcome can differ quite a lot when the content, and each item length, changes, therefore a more clear description is necessary to suggest a fully working solution.

Side note on made comment: If this still won't line up in your local version, as it does in this snippet, some more code of yours likely override the CSS than the one we have access to. Further more, the code we present shows how to, and you need to understand how to apply that to your own.

body {
  font-size: 16px;
  font-family: 'Bliss2Regular';
  margin: 10px;
}
.profile_card_container {
  width: 255px;
  height: 150px;
  padding: 10px;
  border: 1px solid #d3d3d3;
  box-shadow: 2px 2px 2px 2px #ededed;
}
.user_details {
}
.user_name {
  font-family: 'Bliss2Bold';
  color: #2f353f;
}
.user_job_title {
  font-size: 12px;
  color: #72bcd4;
}
.user_contact_details {
  padding-top: 30px;
  font-size: 12px;
}
.user_contact_details ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.user_contact_details ul li {
  padding-top: 12px;
}
.user_contact_details ul li i {
  font-size: 12px;
  color: #72bcd4;
}
.user_contact_details ul li a {
  text-decoration: none;
  font-size: 12px;
  color: #72bcd4;
}
.avatar {
  float: right;
  width: 106px;
  height: 106px;
  background-color: blue;
  /*url('images/avatar.png') no-repeat;*/
}
<div class="profile_card_container">

  <div class="user_details">
    <div class="avatar"></div>
    <div class="user_name">User Name</div>
    <div class="user_job_title">Job Title</div>
    <div class="user_contact_details">
      <ul>
        <li><i class="fa fa-map-marker"></i>Location</li>
        <li><i class="fa fa-phone"></i>0101 101 01 01</li>
        <li><i class="fa fa-envelope-o"></i><a href="mailto:[email protected]">[email protected]</a>
        </li>
      </ul>
    </div>
  </div>
  
</div>

Upvotes: 1

CodeWeis
CodeWeis

Reputation: 856

you have to watch out with your nesting if you put the text in a div and the picture in one div and then the two dis in a parent div and you give him flexbox it should work :)

   body {
      font-size: 16px;
      font-family: 'Bliss2Regular';
      margin: 10px;
    }
    .profile_card_container {
      display: flex;
      /*flex-wrap: wrap;*/
      justify-content: space-between;
      width: 255px;
      height: 150px;
      padding: 10px;
      border: 1px solid #d3d3d3;
      box-shadow: 2px 2px 2px 2px #ededed;
    }
    .user_details{
      width:100%;
      text-align: center;
    }
    .test{
      display:flex;
      flex-direction:column;
     text-align: center;
    }
    .user_name {
      font-family: 'Bliss2Bold';
      color: #2f353f;
    }
    .user_job_title {
      font-size: 12px;
      color: #72bcd4;
    }
    .user_contact_details {
      font-size: 12px;
      
    }
    .user_contact_details ul {
      list-style-type: none;
       padding: 0px;
    }
    .user_contact_details ul li i {
      font-size: 12px;
      color: #72bcd4;
    }
    .user_contact_details ul li a {
      text-decoration: none;
      font-size: 12px;
      color: #72bcd4;
    }
    .avatar {
      /*float: right;*/
      width: 106px;
      height: 106px;
      background:url('http://lorempixel.com/106/106/cats') no-repeat;
    }
<body>
  <div class="profile_card_container">
  <div class="test">
    <div class="user_details">
      <span class="user_name">User Name</span>
      <br /><span class="user_job_title">Job Title</span>
    </div>
    <div class="user_contact_details">
      <ul>
        <li><i class="fa fa-map-marker"></i>&nbsp;&nbsp;Location</li>
        <li><i class="fa fa-phone"></i>&nbsp;0101 101 01 01</li>
        <li><i class="fa fa-envelope-o"></i><a href="mailto:[email protected]">[email protected]</a>
        </li>
      </ul>
    </div>
     </div>
     <div class="avatar">
    </div>
  </div>
</body>

Upvotes: 1

Related Questions