So, there's plenty of advice about how to get text to not wrap around a float by using overflow: hidden, but there's no advice for how to do the opposite. I want text to wrap around an image, and hide the overflow that drops off the bottom of the box, so that I can reveal it later with a transition.
Here's my code that almost, almost works: http://jsfiddle.net/wzH49/
Related
enter image description here
I have added this check button into the card, and added position into it so I can put it in the corner on the left, but when I get the button out of the card corner I got disappear , even when I use z-index!
That's because you have overflow: hidden; set for the .note-card. If you want to keep it, you will have to move your check outside that container or switch to overflow: visible and deal with the cut-off text differently, either by making the box taller, shortening text, or wrapping that text in another div that then would have the overflow: hidden to just cut off the text.
The button disappears because you have the overflow property set to hidden on the .note-card element. Try setting this property to visible.
Also providing a code snippet can allow others to help you in a better manner as screenshots of code are not that helpful.
I need my text to wrap my image which works fine until I set the text overflow the hidden. The reason I need to set it to hidden is because it's going to be half hidden at first. I tried switching back and forth between visible and hidden but it causes nasty visuals.
What can I do to use overflow:hidden an keep the integrity of the float?
A fiddle example of the overflow "bug"
What you could do is set the overflow: hidden to the parent container and then toggle that property to expose more text.
For example: http://jsfiddle.net/audetwebdesign/D8QUg/
However, you need to size the div carefully so that the lines don't get cut off in the middle of the character height.
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
I've created a sample on jsfiddle
So if you try selecting the text and dragging outside of the box it will cause the outer div to scroll to display the hidden parts of the inner div, even though its set to overflow:hidden. This doesn't happen when I remove overflow-y:scroll from the inner div, but unfortunately I need that to be able to scroll so I've got to find some other way of fixing it.
Any ideas of how to prevent it from being scrollable on the x axis when selecting text?
EDIT: The issue also seems to be limited to webkit.
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?