CODEWITHSUNDEEP
cssalignment
thelolcat
thelolcat

Reputation: 11545

Align text to image (CSS)

How it is now: http://jsfiddle.net/cSazm/

How I want it to be: http://jsfiddle.net/mhprg/

The problem with the second variant is that I don't know the exact size of the image, so the fixed CSS margin would not work :( Also there's an extra ugly div..

Are there any other solutions?

Upvotes: 4

Views: 1364

Answers (6)

user2428118
user2428118

Reputation: 8104

You can float the image, and then style the div as a table cell, which will automatically stretch to 100% the available width.

HTML:

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

CSS:

div{
    display:table-cell;
}    

img{
    float:left;
}

↪ View this example at JSFiddle

Upvotes: 4

geebru
geebru

Reputation: 46

If you have your image floated (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 with this technique regardless of image/text size.

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

Upvotes: 2

nice ass
nice ass

Reputation: 16709

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

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

(just add overflow:hidden to your text div)

That doesn't solve the extra div issue however.

Upvotes: 3

Mudasar
Mudasar

Reputation: 249

fix the image width like 

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

now add the your text in a 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 a single div. now just assign the text margin as the width of image 

.text{
    margin-left: 42px;
}

as I have set the width of the image 42 above.

Upvotes: 1

ASouthorn
ASouthorn

Reputation: 399

You'll need to put a width on the text (which you should put in a p tag or whatever you prefer). Then you can float the p left.

It's not ideal, and based on the bigger picture that might not work for what you want to build, but it's the best way. Especially seeing as floating left is built for making an object such as an image inline with text, so in essence you are trying to overwrite the norm which css doesn't take too kindly to!

Upvotes: 2

Caelea
Caelea

Reputation: 2348

Simple, set a margin-right fot the image like so:

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

Upvotes: 1

Related Questions