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.
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.
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/
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'm dealing with a text who goes out of its div. I've coded the frontpage. So, no matter how long the main content is, it should force the sub-content (the grey area and the footer) to move down.
You see how the dummy text is acting
URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm
I've accomplish this before but somehow it's not working now.
You've set an explicit height on that div. For it to reshape itself to its content, you'll need to set height:auto. (or never set its height in the first place)
EDIT: As ANeve said, you'll need to remove the height on both .article and .opentext, as well you'll need to put a clear:left on .lower-container to push the footer down.
If you have an element that only contains floating elements, the container's height will be zero. To fix this you can add a clearing div (<div style="clear:both"></div>).
If you add a clearing div at the end of the #under-content section, it will automatically adjust the height of the section to it's contents.
The other issue you have is that you are using relative positioning on your .opentext div elements. When you set a 'top' property, it actually pushes the content down, causing it to overlap with your #lower-container. You're better off using the 'margin-top' property, which will expand the size the .opentext div to fit all the contents.
So in short:
Add <div style="clear:both"></div> at the end of the #under-content <section>
Change the 'top:82px' to 'margin-top:82px' on your .opentext div
I hope this helps!
Just use wordwrap: break-word; for the div and it will break the word to the next line.
You have set the height property of your .article and .opentext divs. If you remove this property, the content should expand accordingly.
However, you will also need to adjust the positioning of your background image. You should set the background image of .footer itself, rather than relying on one statically-sized background image for the entire page.
I have a form I'm floating. When there is an error, via jquery, I'm adding some content to a p within the form. However, the form doesn't vertically resize to fit the new content. Is there something I have to do to get a floated element to resize when the content within it changes?
Do you have height or other css styling applied that would prevent it from vertically resizing?
Also, what browser(s) is it happening in? It may be a browser bug.
If the is floated, too, then depending on the styling (position: absolute), its dimensions may not be considered to be "in" the form.
Is there a height set on the content? When float is on, the default is to fix height to line height. It is possible that your width on the form is set too low, and the text is trailing off through the block element containing your form Try messing with the line-height property and see what you get. Also, position absolute will mess with you (as Richard mentions below)
Also, consider min-height. This won't work in IE6, but you can substitute with a height in IE6 which acts like min-height in certain circumstances.
Post you code so I can be more specific.