Geek Answers Handbook

CSS - Placing images next to text

I am making a site where images should be displayed next to text content - a kind of pseudo-column layout, as the images and text come from the same HTML source.

I found a fairly simple way to do this by putting the images as their own paragraphs and floating. Would there be an even simpler way (in relation to html) to do this without these additional paragraphs and only attribute additional css images?

If the floating image is in the same paragraph as the text, then paragraphs with and without images will differ in width.

EDIT . Basically, I'm looking for as simple HTML markup as possible for posting images like this . CSS can be complicated;)

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>
+6
css positioning
source share
5 answers

Are you looking for this?

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

This will match all the img tags inside the p tags. But I recommend always using classes or identifiers to comply with CSS rules. Just using a tag name can lead to annoying traps, sooner or later.

Edit

Mm, maybe I was wrong. You want to apply float: right; width: 900px; float: right; width: 900px; to p-elements, not img-elements ...

AFAIK there is no way to select a parent for a specific item. It always works in the direction of PARENT → CHILD, not CHILD → PARENT.

+10
source share

Not. With img inside p, you can float the image to the right, but the text will not remain in the column. He will cuddle under the image. Any right margin or pad that you apply to p is also applicable to img.

Since you have two pieces of related information, I would wrap them in a div and then put them in a 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>
+2
source share

In response to Emily's answer.

Not. With img inside p, you can float the image directly, but the text will not remain in the column. This will wrap under the image. Any margin right or indentation that you apply to p will also apply to img.

As long as she is right, how far she goes, there is a workaround. Although this is 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 upper right corner of p , forcing the text in the column between the left border of the p element and the right fill of 950px. Not perfect and a little dirty, but it allows you to use the column effect without adding additional tags.

... if you don't want to add clearfix br ( br.clearfix: display: block; clear: both ) at the end of the paragraph (to make the p tag skip the image for short paragraphs).

+1
source share

yes, just checked this, make sure you use 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>
+1
source share

I came up with this line of code to help me place the text exactly where I wanted it. I could be a beginner, but he did the job simply and easily and accurately. and all the 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 the text a hyperlink, or if now what you want, you can remove the href field, but remember

 <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>
-one
source share

More articles:


All Articles