Display Image and Text next to each other HTML

Question

I'm trying to display an image and some text on my webpage floating next to each other as you can see below.

enter image description here

I've tried basically all the methods suggested in these two previous SO questions I found on this topic:

However, no matter what combinations I try, this is the result that I obtain:

enter image description here

This is the HTML code for the first example (which seems not to work at all):

<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=100>
    <div>some text here</div>
</div>

This is the HTML code for the second example, which differs cause the text is not wrapped into the <div> container (but seems to work only for a limited amount of text):

<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=300>
    some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text here
</div>

The css file is from Nicholas Gallagher's micro clearfix:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Can you please tell me what is going wrong and how to fix this?

@4dgaurav - No, what I'm trying to do is simply what you can see in the first sketch shown in the question: `an image on the left, some text on the right` — Matteo, Aug 19 '14 at 05:53

4dgaurav · Answer 1 · 2014-08-19T06:25:12.140

5

Demo

css

img {
    display: inline-block;
    vertical-align: middle; /* or top or bottom */
}
.text {
    display: inline-block;
    vertical-align: middle; /* or top or bottom */
}

html

<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width="100px" />
    <div class="text">some text here</div>
</div>

Final Demo

css

img {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}
.text {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 100px);    
}

edited Aug 19 '14 at 06:25

answered Aug 19 '14 at 06:01

4dgaurav

11,360
4
32
59

Yes, its not needed, I thought the html was given from OP, anyways the trick is to display inline-block both the child. – 4dgaurav Aug 19 '14 at 06:10
That's one option (I prefere `inline-block` to `float`). Also note that `img` is by default `inline-block`. – Jon P Aug 19 '14 at 06:11
This solution works only if you have little amount of text on my side. – Matteo Aug 19 '14 at 06:18
As soon as I add all the text that I posted in the question, the float goes under the image. – Matteo Aug 19 '14 at 06:18
your image width is 100px alwayys? – 4dgaurav Aug 19 '14 at 06:22

Jon P · Accepted Answer · 2014-08-19T06:48:35.600

Your problem is that you have applied the clearfix but there is no float applied! Try adding the following

.cf img {float:left;}
.cf div  {float:left;}

Demo

Clearfix .cf does nothing to float. It's purpose is to ensure the "parent" element of floated elements "expand" to contain the floated elements. Adding a backgound-color demonstrates this: http://jsfiddle.net/kxpur7z3/1/

My code in the answer floats each of the elements to the left. Note that "floating" removes the elements from the "natural flow" of the document.

Clearfix Demo

Here are a couple of good references to continue with:

So you want lots of text. Well as block and inline-block elements expand to fit their content you need to apply some width attributes. YOu have some options here.

Apply a specific width to the text: width:80%, width:300px etc
Applying a calculated width to the text (thanks @ 4dgaurav for reminding me of this): width:calc(100% - 100px)
Go dynamic on both image and text with complimentay percentages: img {width:20%;} div {width:80%;}

Demo of various options

As soon as I add all the text the container goes below the figure. Do you have an idea why? — Matteo, Aug 19 '14 at 06:13

score 1 · Answer 3 · answered Aug 19 '14 at 05:56

1

I have just update your html like below.

<div class="cf">
   <div><img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width="100px" /> </div>
   <div>some text here</div>
</div>

I have added only one additional CSS like below.

.cf > div
{
display:table-cell;
vertical-align:top;
}

DEMO

answered Aug 19 '14 at 05:56

Suresh Ponnukalai

13,820
5
34
54

This worked! Thanks for your answer. Can you please expand a bit explaining the meaning of the code you added? – Matteo Aug 19 '14 at 06:28
It is very simple. `table-cell` needed to display next to each other inside the `table`. Already your CSS makes `.cf` as table. So that I have added the `table-cell` property for the child elements. – Suresh Ponnukalai Aug 19 '14 at 06:31
It works, but a shame it doesn't address why the original code didn't work in the first place. – Jon P Aug 19 '14 at 06:49
Also your comment that the `.cf` div is a `table` is incorrect, an empty table element is added before and after the div via css (`.cf:before, .cf:after`) – Jon P Aug 19 '14 at 07:00

score 0 · Answer 4 · answered Aug 19 '14 at 05:54

Make use of bootstrap classes which makes it very easy to achieve this

Example:

<div class="row">
  <div class="col-md-6">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg"      width=100>
  </div>
  <div class="col-md-3">
    <h5> some text here </h5>
  </div>
</div>

Make use of bootstrap.min.css library

-Thanks

score 0 · Answer 5 · answered Aug 19 '14 at 05:57

use this html

<div class="cf">
<div class="leftcol">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=100></div>
<div class="rightcol">some text here</div>
</div>
<div class="clear"></div>

then CSS

.leftcol{float:left; width:50%}
.rightcol{float:left; width:50%}
.clear{clear:both; display:block;}

score 0 · Answer 6 · answered Dec 11 '17 at 13:36

This answer is maybe coming a bit late, but since I had that this problem too, I created a working model on fiddle (without float and purely with inline-block).

I didn't want to use float, because it messes up the heights and backgrounds of the parent container.

HTML

<div class="box">
  <div class="box-content">

    <div class="box-image">
      <div class="wrap">
        <img src="https://pbs.twimg.com/media/DQckroiVwAAPw8Y.jpg" />
      </div>
    </div>

    <div class="box-text">
      <div class="wrap">
        Hier komt de tekst en wel een hele lange tekst, eigenlijk te lange tekst. Well this could be even longer than the Dutch text if it would be in English. Und es könnte auch noch etwas an Deutschen Text beinhalten, aber das würde schon ein sehr lange Text werden. Dus houden we het maar gewoon bij Nederlandse tekst.
      </div>
    </div>

  </div>
  <div class="box-footer">
    <div class="wrap">
      hier komt de bijlage
    </div>
  </div>
</div>

CSS

.box {
  width: 600px;
  border: 5px solid #a1a1a1;
  border-radius: 10px;
  background: #fff;
  position: relative;
}

.box-content {
  padding: 10px;
}

.box-image {
  width: 30%;
  display: inline-block;
}

.box-image .wrap {
  padding-top: 10px;
  width: 100%;
}

.box-image img {
  width: 100%;
}

.box-text {
  display: inline-block;
  text-align: justify;
  font-size: 20px;
  vertical-align: top;
  width: 68%;
}

.box-text .wrap {
  padding: 5px;
}

.box-footer {
  padding: 10px;
  border-top: 4px solid #a1a1a1;
  text-align: center;
  background: #f1f1f1;
}

Fiddle

Display Image and Text next to each other HTML

6 Answers6

HTML

CSS