Question

<div class="hi>
    <div class="hello">name</div>
     <div class="world"><img /></div>
</div>
.hi{
    height: auto;
    position: relative;
    text-align: center;
    width: 100%;
 }
 .hello{
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      height: 22px;
      margin: 3px 0;
      max-width: 80%;
      overflow: hidden;
 }
 .world{
       background: url("***") no-repeat scroll 0 0 transparent;
       display: inline-block;
       height: 13px;
       left: 5px;
       position: relative;
       top: -9px;
       width: 14  
}

The issue is when the name is exceeding and max width is applied the background image in world div appears misaligned(appears slightly above), while the name for which max-width is not getting applied displays it correctly.

The idea is name and image should be in the same line.with name center aligned and image next to it. and if name exceeds it should be truncated so that the image doesn’t get displayed in the next line. i am giving background image since i have an image inside a image.

the issue happens in chrome alone.

Answer 1

max-width: 80% doesn’t mask the fact that <div> is a block-level element. When a width is not explicitly set, it will always be width:100% inherently. If you set the width of .hello to 80%, I think you’ll see what you’re expecting.