Align text in image (CSS)

Question

As of now: http://jsfiddle.net/cSazm/

How I want: http://jsfiddle.net/mhprg/

The problem with the second option is that I don’t know the exact size of the image, so the fixed edge of the CSS will not work :( There is also an additional ugly div ..

Are there any other solutions?

Answer 1

You can use the shrinkwrap method to contain text and prevent it from flowing below the image:

http://jsfiddle.net/cSazm/5/

(just add overflow:hidden to your text div)

However, this does not resolve the additional problem.

Answer 2

You can float the image and then erase the div as a table cell, which automatically stretches to 100% of the available width.

HTML:

 <img src="http://lorempixel.com/g/80/80/" alt="" /><div>Text</div> 

CSS

 div{ display:table-cell; } img{ float:left; } 

↪ See this example in JSFiddle

Answer 3

You will need to put the width of the text (which you should put in the p tag or whatever you prefer). Then you can swim to the left.

It is not perfect and is based on a larger picture that may not work for what you want to build, but this is the best way. Especially since the floating left is built to create an object, such as an image embedded in the text, therefore, in essence, you are trying to overwrite the norm with which css is not too kind to!

Answer 4

If you have an image floating (left in this case), apply overflow:hidden; to your text div. So your CSS should be:

 image{ float: left; width: 50px; height: 50px; } text-div{ overflow: hidden; } 

Your content will never flow below the image using this technique, regardless of image / text size.

To find out more about this, Nicole Sullivan wrote an awesome blog post: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Answer 5

Simple, set margin-right for the image as follows:

 img { float: left; margin-right: 10px; } 

Answer 6

fix image width e.g.

 <img src="http://lorempixel.com/g/80/80/" width="42" /> 

now add your text to the tag like div or p

  <div class="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> 

nest above tags in one div. now just assign the text box as the image width

 .text{ margin-left: 42px; } 

since I set the image width to 42 above.