Surprisingly, I cannot find an answer to the simple question - how to wrap text around image?
I have dynamically generated (user-entered) text and image, and I need to fit it in the div, like that:
Or, in case there's not enough text, it shall be like that:
In other words, image shall be displayed in place it is set to and shall be wrapped by text. I thought it would be easy but suddenly cannot find how to do that, please help, I suppose there's a simple way to achieve that.
I believe it's possible but it's so advance that you need a lot of js and css to manipulate the flow. Assuming the blue rectangles are html tag where you can put your text, let's say a div. For example the text from rA will continue to rB then to rC. This one will continue downwards until its total height is equal to the height of the element in the middle, let's say an image. Basically the thought is making the texts jump from one div to the other when it overflows. Found this one on this website .
Related
I have a responsive design that mostly works. Images are in their own DIV, and that div is floated left or right. Captions for the images are in the div, so they stay with the image. By default image div width is set to 30%
If I put sufficient text between successive divs I get a pleasing display, with the text wrapping around the image.
If the images are too close, however they stack, and I end up with 2 images floating next to each other, and a tiny column of text.
The use of "clear" eliminates the text too.
Is there a way to float a div so that:
Text flows around it.
A second image does not stack adjacent to it even if there is nominally room for it.
In essence I want to float an image, but ensure that it is flush to the left margin, and not be on top of something else.
At this point my process is to try each page at multiple effective widths, and add more text/move the div as needed. This is fairly time consuming. I expect with a bit of time I will find out that I need X words between DIVS,
In some cases, I will stack multiple images within a single DIV. This works well for related images.
Example of a page with the issue about 3/4 of the way down the page.:
http://sherwoods-forests.com/Trees/Leaf_Trees/Poplars/Columnar_Poplars.html
CSS file for the site:
http://sherwoods-forests.com/2col.css
Put the floated image DIVs into the text container, not as a sibling to the text container. That way the text should float around it and won't be affected by a clear in one of the image DIVs.
If that doesn't work, you'll have to post your code - this general answer is all I can give you without the actual code...
can someone help me with a little trick in css? I need to put an image (<a><img/></a>) inside a text block (<p></p>) like the image above:
Like #StephanMuller said, that's not possible, i was looking for a float:center, that doesn't exist, but i can work around with some float:left, and right! Thanks again everybody, sorry for not been so clear, please don't downvote me ! SOLVED :)
This is not possible with a simple html/css construction. You're looking for float:center-like behavior, which unfortunately doesn't exist.
The main problem here is that images inside text are inline (or inline-block) elements per definition (if you make it a block it breaks up the flow of the text). This in it's turn means that other lines of text are not aware of where the image is. float was deviced to solve this, but it only works on the left and right side of something, not in the middle.
The closest I could get was this: http://jsfiddle.net/5HPMq/
As you can see, I hardcoded some heights to be able to easily set the right negative margins on the images. This way the height of the image doesn't influence the line-height of the rest of the line, but as I stated the other lines are not aware of where the image is, so they will flow behind it.
TL;DR: Sorry, you can't do this.
addition
I was assuming you want the text to flow around tie image. If you merely want to overlap the images on the lines above and below it, use my jsfiddle and see if you can work from there.
I assume you want the image just in front of your text.
This might help:
<img style="position:absolute; TOP:100px; LEFT:100px; WIDTH:50px; HEIGHT:50px" SRC="image.jpg">
top:100px; and left:50px; are the starting points. Just find out the coordinates.
tried it myself and it looks like this for me:
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.
Essentially what I want to achieve is a a dynamic portion of text - in the middle of a paragraph, that is dynamic. I am having trouble creating an in-line div (or span) that can contain something like an unordered list or several other spans which I can move up or down to show them. Think a window (with overflow) that contains 4 divs stacked on top of each other, with only enough room to show one of them (the rest are hidden). I want to be able to move this stack up and down to show other parts of this stack.
I was hoping someone could reply with a jsfiddle that shows a big block of text with a dynamic portion in the middle of it, in line with the rest of the text in the paragraph.
You could start with something like this, using jQuery Draggable.
http://jsfiddle.net/RqHFL/
Apply the "draggable" to you div like this:
$( "#draggable1" ).draggable({ axis: "y" }); //constrained to y axis movement
After some consideration, vertical-align: bottom seemed to be my best friend.