Tim Tim - 1 month ago 5
CSS Question

Inline-block elements next to each other -- preventing longer text from jumping below elements its next to

"Firstname Lastname" stays top aligned to the little initials icon until it becomes too long in length, then it drops down underneath it. I'd like for it to maintain its position at the top even if the length increases. Not sure how to do this without using floats.



.user_img_color,
.user_img_color_large {
background: #8aa943;
border-radius: 40px;
color: #fff;
float: left;
font-size: 15px;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
z-index: 1;
}
.name-and-status {
vertical-align: top;
}
#user-initials {
margin-right: 5px;
}
.inline-block {
display: inline-block;
}
.menu-user-info div {
vertical-align: middle;
}
.container {
width: 220px;
background-color: #fff;
}
.welcome-message {
margin-top: 10px;
font-size: 11px;
line-height: 15px;
}
div.status-indicator {
display: inline-block;
height: 8px;
width: 8px;
content: " ";
line-height: 14px;
background: #f5c002;
border-radius: 8px;
margin: 12px 2px 0 0;
vertical-align: middle;
}
div.status-message {
display: inline-block;
font-size: 11px;
line-height: 14px;
white-space: nowrap;
margin-top: 10px;
vertical-align: top;
}

<div class="container">

<div id="user-initials" class="inline-block">
<div class="user_img_color user_img_color-pending">FL</div>
</div>


<div class="name-and-status inline-block">
<div class="employee-name">Firstname Lastname</div>
<div class="status-indicator status-indicator-complete"></div>
<div class="status-message">Process Status</div>
</div>


<div class="welcome-message">
Lorem ipsum dolor sit amet
<br>adipiscing elit, sed do eiusmod.
</div>

</div>





Fiddle: https://jsfiddle.net/63kn6ufr/1/

Answer

Try this, Give width to second element also.

<style>
.user_img_color, .user_img_color_large {
background: #8aa943;
border-radius: 40px;
color: #fff;
float: left;
font-size: 15px;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
z-index: 1;
}

.name-and-status {
  vertical-align: top;
  width: 170px
}

#user-initials {
margin-right: 5px;
}

.inline-block {
  display: inline-block;
}

.menu-user-info div {
vertical-align: middle;
}

.container {
  width: 220px;
  background-color: #fff;
}

.welcome-message {
margin-top: 10px;
font-size: 11px;
line-height: 15px;
}

div.status-indicator {
display: inline-block;
height: 8px;
width: 8px;
content: " ";
line-height: 14px;
background: #f5c002;
border-radius: 8px;
margin: 12px 2px 0 0;
vertical-align: middle;
}

div.status-message {
display: inline-block;
font-size: 11px;
line-height: 14px;
white-space: nowrap;
margin-top: 10px;
vertical-align: top;
}
</style>
<body>
<div class="container">

  <div id="user-initials" class="inline-block">
 <div class="user_img_color user_img_color-pending"> FL </div>
  </div>


  <div class="name-and-status inline-block">
<div class="employee-name">Firstname Lastnameghgujyikui</div>
<div class="status-indicator status-indicator-complete"></div>
<div class="status-message">Process Status</div>
  </div>
  
  
  <div class="welcome-message">
Lorem ipsum dolor sit amet<br>adipiscing elit, sed do eiusmod.
  </div>
  
</div>
</body>

Hope it will be useful.

Comments