CODEWITHSUNDEEP
csspositioning
user131342
user131342

Reputation:

CSS - Positioning images next to text

I'm doing a site in which images need to presented next to textual content - a sort of pseudo two-column layout, as the images and text come from a single html source.

I've found quite a simple way to do this by putting the images as their own paragraphs and floating them. Would there still be a more simpler way (in regards to html) to do this without these extra paragraphs and by only attributing extra css to images?

If the floated image is in the same paragraph than the text, then paragraphs with and without images would be different in width.

EDIT: Basically, I'm looking for as simple HTML markup as possible to position images like this. The CSS can be complex ;)

CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }


Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>


Is the above possible with this HTML?
<p><img src="image.jpg" /></p>

Upvotes: 7

Views: 74007

Answers (5)

Nikoan Johnson
Nikoan Johnson

Reputation: 1

I concocted this line of code here to help me position some text exactly where I wanted it. I might be a novice way but it got the job done simply and easily and precise. and all HTML.

<a href="http://elonmusk.com" STYLE="position:absolute; TOP: 24px; LEFT:50px;">put your txt in here and use the Top and Left values to position the text precisely where you want it</a>

you can also use the href field to make your text a hyperlink or if thats now what you want you can jus delete the href field but be mindful to keep the " 

<a STYLE="position:absolute; TOP: 24px; LEFT:50px;">txt go here - use Top & Left values to position it. ex. of text with no hyperlink</a>

Upvotes: -1

Philippe Gerber
Philippe Gerber

Reputation: 17836

Are you looking for this?

p img { float: right; width: 900px; }

This would match all img-tags inside p-tags. But I recommend always using classes or ids to match CSS rules. Just using the tag name can lead to annoying pitfalls, sooner or later.

Edit

Mhm, maybe I got you wrong. You would like to apply float: right; width: 900px; to the p-elements, not the img-elements ...

AFAIK there is no way to select a parent of a specific element. It always works in direction PARENT -> CHILD, not CHILD -> PARENT.

Upvotes: 10

hndcrftd
hndcrftd

Reputation: 3210

yes, just tested this, make sure you use the strict doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 

<style>
p { width: 500px; position:relative;}
p img { position:absolute; margin-left:520px;}
</style>

<p><img src="PastedImage.jpg" />text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

In response to Emily's answer.

No. With the img inside the p, you can float the image right but the text will not stay in a column. It will wrap underneath the image. Any right margin or padding you apply to the p will also apply to the img.

While she's right, as far she goes, there is a workaround. Though it's not ideal:

p {position: relative; padding-right: 950px; /* width of the image + 50px margin */ }

img {position: absolute; top: 0; right: 0; }

This should put the image in the top-right corner of the p, while forcing the text into a column between the left boundary of the p element and the 950px right-padding. Not ideal, and a little messy, but it allows for the columnar effect without adding extra tags.

...unless you want to add a clearfix br(br.clearfix: display: block; clear: both) at the end of the paragraph (to force the p tag to extend past the image for short paragraphs).

Upvotes: 1

Emily
Emily

Reputation: 10088

No. With the img inside the p, you can float the image right but the text will not stay in a column. It will wrap underneath the image. Any right margin or padding you apply to the p will also apply to the img.

Since you have two pieces of related information, I would wrap those in a div and then position them within the div.

.info {width:900px;}
.info img {float:right;}
.info p {margin-right:400px;}

<div class="info">
    <img src="image.jpg" />
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

Upvotes: 2

Related Questions