Fitting content into a column with icon

Question

When i followed another example I found that it doesn't work in my case. I use a Font Awesome icon and it somehow interferes with my CSS.

What steps should I take to make the paragraph of text equally indented (in pixels) from the left border and the icon?

The proposed solution that doesn't work in this case:

#left {
    float:left;
    width:7px;
}
#right {
    width: 100%;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div style="width:200px"><i class="fa fa-caret-up" id="left" style="display:block;vertical-align: top;margin-top:3px"></i><span id="right" style="margin-left: 0px;display:block">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>

This might be a duplicate of [this](http://stackoverflow.com/a/34724708/3880255). — Clemens Himmer, Jan 12 '16 at 14:36

score 2 · Accepted Answer · answered Jan 12 '16 at 14:36

You can use a positive margin-left on the containing div element, and a negative margin-left on the child img to move it to the left of the text, like this:

div {
  width: 200px;
  text-align: justify;
  margin-left: 20px;
}
div .fa {
  float: left;
  width: 10px;
  margin: 3px 0 0 -15px;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div>
  <i class="fa fa-caret-up"></i>
  A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
</div>

score 1 · Answer 2 · answered Jan 12 '16 at 14:59

There are a couple of ways to achieve this and Rory has shown you one. Another method would be to add a position property value of relative to main(parent element) as shown below, then a position property value of absolute to .fa. that way you can use left with negative value to position it as you desire.

Note: To have the text wrap around the icon, just float .fa to left and then use margins to adjust the spaces between the icon and text.

.main {  
  width: 200px;
  margin-left: 50px;
  position: relative;
  }


.fa {
  position: absolute;
  left: -25px;
  }

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div class="main"><i class="fa fa-caret-up"></i><span style="margin-left: 0px;display:block;width:100%">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>

Fitting content into a column with icon

2 Answers2