Question

I’m having an issue with inline-blocks breaking out of a parent w/ text. I’m sure it’s a quick fix, but I can’t seem to figure out how to get things to fill naturally.

this is what it looks like

the text has a red background to show you where the box is and how it’s floating outside of it’s constraint. Here’s what the code looks like.

<div class="comment-box">
  <a class="comment-owner-link"><img src="user-img" /></a>
  <div class="comment">comment info goes here</div>
</div>

and the css is pretty straight forward

.comment-box {
  display: block;
  margin: 8px 8px 0 8px;
  white-space: nowrap;
}

.comment-owner-link {
  display: block;
  float: left;
  position: relative;
  width: 27px;
  height: 27px;
}

.comment-owner-link img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.comment {
  display: block;
  overflow: hidden;
  margin: 0 0 0 5px;
  word-break: break-all;
  white-space: normal;
}

any ideas on how to fix this up? or what’s going on?

Answer 1

changed these two classes to suit your needs — u need to set the width

.comment-box {
display: block;
margin: 8px 8px 0 8px;
white-space: nowrap;
width:100px; /* add which ever width your application/comment-box needs here */
}
.comment-owner-link {
display: inline-block;
 vertical-align: top;
position: relative; 
width: 27px;
height: 27px;
width:10px; /* try to give the width necessary -- all should add up to 100 or which
 ever you've given fot comment-box */
}

.comment-owner-link img {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 width:30px;
}
.comment {
display: inline-block;
vertical-align: top;
 margin: 0 0 0 5px;
width:60px; /*width for pict - 30px and the comment,say 60px,i.e. 100 - (10 + 30)*/
word-break: break-all;
white-space: normal;
overflow:hidden; /* this is gonna
 make sure it doesnt fall out of the specified space */

}