ansaurus

Question

Answer 1

+3 A:

Are you looking for this?

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

This would match all img-tags inside p-tags. But I would always use classes or ids the 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 the 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.

Philippe Gerber 2009-06-30 21:37:18

Up-voted, as this is certainly the easiest -and probably leanest- way. I'd suggest maybe adding 'clear: left' but that's probably not necessary.

David Thomas 2009-06-30 21:46:34

Hi, not exactly. As the site content will be updated with a wysiwyg editor like TinyMCE by persons without any knowledge of html/css, I'm looking for a way to achieve the image positioning with as little extra markup as possible. So classes for images would be ok, I'm just wondering if there's a way to do the above without extra paragraphs. Another way to put it: I'm looking for the most simple html markup to achieve this kind of image positioning:http://www.widerscreen.fi/2006/3/elokuvallinen_kauhukokemus.htm

jpjoki 2009-06-30 21:49:51

Answer 2

A:

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>

Emily 2009-06-30 21:48:56

Answer 3

+1 A:

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).

David Thomas 2009-06-30 22:15:33

Positioning the image to the right will work as long as the images are =< in width to the gutter you define with padding on the p. You can use faux columns (http://www.alistapart.com/articles/fauxcolumns/) for the background effect.

Matt Hampel 2009-06-30 22:19:24

Yeah; I never thought to clarify that -I just took the 900px from the example without thought- though I kinda implied it...maybe...kinda...in the css code-comment. >cough< =)

David Thomas 2009-06-30 22:21:22

Answer 4

A:

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"&gt; 
    <html xmlns="http://www.w3.org/1999/xhtml"&gt; 

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

Raine 2010-05-29 20:31:58

ansaurus

tags:

views:

answers:

CSS - Positioning images next to text

related questions