different image size alignment in div

Question

i have a different size image in a my box header.

 <div class='divboxheader'>
<img class='imgstyle' src="http://www.bnbsync.com/themes/bnbsync/assets/images/logo-dark.png" />
<span class='textleft textcustom'><b>text of title1</b></span>
<span class='textright'>text</span>

this is a screen

How can I align the text of different row?

complete example: https://jsfiddle.net/tcggk8ya/1

Answer 1

The problem is that you are relying on inconsistent content (the image width) to generate the spacing of you text. There are multiple solutions to this problem but I recommend wrapping the img inside a fixed with container.

I created a quick 'n dirty example that shows how this can be done using semantic set of tags.

.boxlist {
  list-style: none; 
  margin: 0;
  padding: 0;
}

.boxlist__item {
  background-color: white;
  border: 1px solid black;
  border-bottom: none;
  box-sizing: border-box;
  width: 300px;
  height: 50px;
}

.boxlist__item:last-child {
  border-bottom: 1px solid black;
}

.boxlist__figure {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  text-align: center;
 }
 
 .boxlist__figure-img {
   width: auto;
   height: 25px;
   margin-right: 0;
}

.boxlist__figure-label {
  display: block;
  font-family: "Arial";
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boxlist__content {
  display: block;
  box-sizing: border-box;
  float: left;
  font-family: "Arial";
  line-height: 50px;
  padding-left: 25px;
  text-align: left;
  width: 200px;
}

.boxlist__actions {
  list-style: none; 
  margin: 0;
  padding: 0;
}

.boxlist__action {
  display: block;
  font-family: "Arial";
  font-size: 12px;
  line-height: 25px;
}

<ul class="boxlist">
  <li class="boxlist__item">
    <figure class="boxlist__figure">
      <img class='boxlist__figure-img' src="http://www.bnbsync.com/themes/bnbsync/assets/images/logo-dark.png" />
      <span class="boxlist__figure-label">My label</span>
    </figure>
    
    <strong class="boxlist__content">Some user</strong>
    
    <ul class="boxlist__actions">
      <li class="boxlist__action">action 1</li>
      <li class="boxlist__action">action 2</li>
    </ul>
  </li>
  
  <li class="boxlist__item">
    <figure class="boxlist__figure">
      <img class='boxlist__figure-img' src="http://www.bnbsync.com/themes/bnbsync/assets/images/logo-dark.png" />
      <span class="boxlist__figure-label">My label</span>
    </figure>
    
    <strong class="boxlist__content">Some user</strong>
    
    <ul class="boxlist__actions">
      <li class="boxlist__action">action 1</li>
      <li class="boxlist__action">action 2</li>
    </ul>
  </li>
  
  <li class="boxlist__item">
    <figure class="boxlist__figure">
      <img class='boxlist__figure-img' src="https://lh5.googleusercontent.com/-iRkoc0wxL4w/AAAAAAAAAAI/AAAAAAAAAAk/PTyC2SH4ZqE/photo.jpg?sz=110" />
      <span class="boxlist__figure-label">My label</span>
    </figure>
    
    <strong class="boxlist__content">Some user</strong>
    
    <ul class="boxlist__actions">
      <li class="boxlist__action">action 1</li>
      <li class="boxlist__action">action 2</li>
    </ul>
  </li>
</ul>