Question

This is a difficult question to put into words, so I think a practical demonstration is in order.

I have a collection of html elements:

<div class="outer-div">                  // Container
  <div class="content-div"></div>        // Text goes into this element
  <span class="clear-button"></span>     // BG image for this is a 16x16 icon
  <span class="select-button"></span>    // BG image for this is a 16x16 icon
</div>

Which uses this css:

div.select-div {
  background-color: white;
  border: 1px solid #CCC;
  vertical-align: middle;
  margin-bottom: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 20px;
  padding: 4px 6px;
}

div.content-div {
  float: left;
  overflow: hidden;
  background-color: white;
  vertical-align: middle;
  font-size: 14px;
  color: #555;
  height: 20px;
  width: auto;
}

span.select-button {
  cursor: pointer;
  display: inline-block;
  float: right;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  position: relative;
  background-color: red; // for testing simplicity, this would be a bg image
}

span.clear-button {
  cursor: pointer;
  display: inline-block;
  float: right;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  position: relative;
  background-color: black; // for testing simplicity, this would be a bg image
}

Text is added into the content div, and works fine for a small amount of text e.g:

But if you add more text, this happens:

I’ve been tearing my hair out trying to find a way to stop those icons from ever moving from their positions, but I cant work it out. Ideally I’d like the div to expand vertically, but having the overflow text just be hidden would also be fine. the outer div width may vary.

Answer 1

You can restrict the width of your content div and then use absolute positioning for the icons. That’s one method, but to explain your situation, you’re not defining a specific width for the content div or clearing the floats inside the container. That’s why things are breaking up. You can try something like this:

div.select-div {
  background-color: white;
  border: 1px solid #CCC;
  vertical-align: middle;
  margin-bottom: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 20px;
  width:200px;
  padding: 4px 6px;
  position:relative;
}

div.content-div {
  background-color: white;
  vertical-align: middle;
  font-size: 14px;
  color: #555;
  height: 20px;
  width: 160px;
}

span.select-button {
  cursor: pointer;
  display: inline-block;
  position:absolute;
  top:2px;
  right:38px;
  width: 16px;
  height: 16px;
  background-color: red; // for testing simplicity, this would be a bg image
}

span.clear-button {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  position:absolute;
  top:2px;
  right:18px;
  background-color: black; // for testing simplicity, this would be a bg image
}

This should cause your container to expand vertically to fit the content. If that’s not desired, you can limit the height of the inner content and overflow hidden.