two divs side by side (again)

Question

I have read countless posts on this topic however I am yet to find a solution that works. I simply want to have two divs side by side with the LHS div being the width of the FA char and the RHS div being the remainder.

<div class="helper">
  <div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
  <div class="text-muted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
  </div>
</div>

RaJesh RiJo · Answer 1 · 2017-09-11T10:07:31.677

1

Set display:table-cell to your content and icon will give the desired output. Check below snippet.

.inline {
  display: table-cell !important;
  width: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
  <div class="text-info"><i class="fa fa-info-circle fa-2x inline"></i></span>
    <div class="text-muted inline">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel.
      Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
    </div>
  </div>

edited Sep 11 '17 at 10:07

answered Sep 11 '17 at 09:54

RaJesh RiJo

4,302
4
25
46

Thank you however this solution has the text wrapping which I want to avoid. – Dercni Sep 11 '17 at 09:58
I don't find any word wrap, can you pls specific? – RaJesh RiJo Sep 11 '17 at 10:02
The text starts to the right of the icon however the second line of text is under the icon. I wish to have these two items in effectively two columns next to each other. – Dercni Sep 11 '17 at 10:04
check the updated one. then you are suppose to use `display: table-cell`. – RaJesh RiJo Sep 11 '17 at 10:08
@RaJeshRiJo : Now you're just copying my answer, RaJesh :-p – John Slegers Sep 11 '17 at 10:11
@JohnSlegers not exactly, i just changed my answer as per his requirement. didn't copy from yours. – RaJesh RiJo Sep 11 '17 at 10:14
Oh well... I'm in a good mood, so +1 for you too then ;-) – John Slegers Sep 11 '17 at 10:16

score 1 · Answer 2 · answered Sep 11 '17 at 09:55

Not sure what you're trying to do but you could use something like Flexbox which is in the JS fiddle here.

Alternatively you could do something like this:

HTML

<div class="helper">
  <div class="text-info">FA</div>
   <div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
  </div>
</div>

CSS

.text-info, .text-muted {
  float:left;
}
.helper {
  clear:both;
}

If you want both of them to have different widths, you can simply set the widths of each (using %, px or whatever).

This did not work for me. Still places on div under the other. — Dercni, Sep 11 '17 at 10:31
Do you have any margin or padding on any of the containers? Because if you do, then you'd need to adjust the width because of the CSS box model — zik, Sep 11 '17 at 10:45

John Slegers · Answer 3 · 2017-09-11T10:53:26.910

1

I believe this is what you're going for :

.text-muted {
  display: table-cell;
}

.text-info {
  padding-right: 10px;
  display: block;
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
  <div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
  <div class="text-muted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
  </div>
</div>

two divs side by side (again)

3 Answers3