显示图像和文本并排显示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.

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

• How to display items side-by-side without using tables?
• HTML Code to put image in left and text in right side of screen with footer below?

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

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?

Answer 1

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);    
}

Answer 2

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/float
• http://www.sitepoint.com/web-foundations/floating-clearing-css/

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

Answer 3

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

Answer 4

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

Answer 5

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;}

Answer 6

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