Is it possible to style text wrapping ALL AROUND an element as it appears in the image attached? (Either CSS, or JQuery)
.
Thank you
As far as I'm aware, there's only an ugly hack where you cut your image into "slices" and have them sitting inside your paragraph text at the right spots. Needless to say, that's not very nice nor very dynamic.
Floating only allows you to move elements to the left or right.
Related
I have a div full of text. I want to put an image into it at any preferred location and have the text flow around it. In fact I'd like to be able to do the same thing several times, to have ads or photos appear within the text of the article.
If you try this by placing the image with a position:relative then it obscures the text beneath it. Any solution?
LATE ADDITION: float is not what I'm looking for because I want to be able to position the ads/images anywhere within the text div, not only in its top corners. Thanks.
I have two questions:
1) I have a div with an image that I use for my footer, but I when I resize the page the footer text gets all "mushed" together. Is there any way I can get the text to stay in a certain position and resize with the page?
2) I use a div for the body of the page, but when I try to add text and align it in position it moves the entire div. How can I get the div (which is just background color) to stay in place while I move the text around?
Here is the site and code on jsfiddle: http://jsfiddle.net/HzwV9/embedded/result/
Thanks.
Had a fiddle with your fiddle, here's a result that may help you: http://jsfiddle.net/HzwV9/4/
Some things I noticed:
A few of your HTML tags aren't closed (that's asking for trouble).
No need to use <h1> for your lower links; it's a block element, not an inline element, and also you'll need <a> to make a link later anyway
You can simplify the big list of tags at the beginning by just using * - all!
Hope this helps. Also, footers are notoriously difficult, since CSS doesn't do vertical sizing very well...there's a few solutions out there but they all have something wrong, up to you what you want to be wrong :)
This is my problem:
http://jsfiddle.net/pbgLc/
I need the background image (with url) to be placed at the top left position of the image, and want the text to be moved next to the background image.
As you've probably noticed I'm using two backgrounds, so its probably not possible to use just one div, right?
Have you guys any solutions for that?
I don't know if this is exactly what you are looking for, but you can have 2 background elements at the same time, as long as they don't conflict each other. http://jsfiddle.net/pbgLc/5/
Maybe this can help a little? CSS background-position Property
If you want the image and the text next to each other, why don't you put them litterly next to each other?
2 divs inside 1 div
Or am I misunderstanding you?
I'm trying for the life of me to figure out what should be an excruciatingly simple CSS task: aligning a block of text to the right of an image and vertically positioning the block so it aligns with the bottom of the image; and I'd prefer to not have to declare a height for the containing element as this is for a lengthy image listing and the dimensions will vary (but all with a certain max width/height). I've attempted to define a parent element with "position:relative" containing two left-floated divs, one with the image and the other with the text block, positioned "absolute" and "bottom:0" and I can't seem to get the text block to align with the bottom of the image...
any assistance here may very well help me stave off a fit of insanity ;)
If the text go to the right of the image, just use an element with display:inline-block after the image, and enclose everything in a block (like div). See it here
I have this code: http://jsfiddle.net/5RbrL/
As you can see, the text doesn't go over the .box div. I would like to achieve the same, but the .box div should be attached to the bottom of the container.
First thing I tried was setting the container's positioning context to relative and making .box absolute, but this takes it out of the document's flow and text is placed underneath .box, which is exactly what I don't want to happen.
I do not know the height of the container, as it will depend on the amount of text inside it.
Is there any way to make the text fill the entire container, but leave the bottom right square empty (for a background graphic)?
[EDIT]
I apologise for not phrasing my question clearly: I would like the text to wrap around the .box.
Unfortunately what you ask can't be done with pure CSS.
You need a specific height to be able to float/position elements in this manner.
You could get around it be adding more elements, but this isn't preferable as then you'd have to invent some way to spread the last parts of text over to the empty element.
Well you could fake it by adding another element and somehow injecting the last lines of text into it.
Other than that, without a specific height I am not sure there is a real way to do it. HTML should come up with some kind of pathing system :D
__
After some thinking and experimentation I have an easier solution, just include the element within the text (inside the <p>.)
Have you tried moving the image div to the bottom of the container (underneath your text) and then clearing the container with either a clear div or overflow:hidden? http://jsfiddle.net/5RbrL/14/
What exactly do you want to do?
if do you want the box in the bottom, you can put an overflow hidden in the container, and then move the .box to the bottom > something like this >
http://jsfiddle.net/3v2mr/
or the structure can't changes?