I have a div tag with fixed width. Now i want that if there is a condition of overflow then text should go to next line automatically. I used overflow:auto but its giving a horizontal scroll bar. There should not be any scroll bar, text should go to next line.
Any idea how to do it with css???
If you want a scrollbar to appear for when text fills more than the height of a div, you can try:
overflow-y:auto
You might also need word-wrap or white-space css attributes?
to add to the link David's pasted, if you want the vertical scrollbar to show up, then the height property of the div should be fixed.
Related
Why is my div cutting off the content of its contained absolutely positioned div?
I am trying to get my twitter bootstrap popover to be "on top" of the containing div. As you can see below, the popover is being cut off.
Z-index
Popover is absolutely positioned, so figured I'd try increasing z-index. Didn't work.
overflow: visible
Then next I figured I'd check for all the containing elements having overflow set to something other than visible, but that also didn't change anything.
Is there some CSS attribute I'm forgetting to check?
I have a div and that div has a height of 200px. Inside the div there is text and I don't want the div to have scrollbars therefore I've set overflow:hidden.
Now, inside that div there is a also a list, acting as a dropdown box. When you click on the list/dropdown box, I want it to come on TOP of the main div.
Here is an example with the main div to overflow:hidden:
And this is an example without overflow:hidden. So I want the following but the text not overflowing.
jsFiddle: http://jsfiddle.net/w8kQA/
You could set the overflow:hidden on the element inside the box, instead of on the box itself:
http://jsfiddle.net/w8kQA/1/
In the comments above, you mention that you have 20 boxes inside a div.
If that is the case then I would wrap the #box and the .list inside of a holder div. That way you can achive your layout and still have multiple boxes in a div.
JSFiddle: http://jsfiddle.net/w8kQA/2/
You can also reduce the max-height of your list to fit into the div.
http://jsfiddle.net/etienne_carre/w8kQA/4/
You can do it like this: http://jsfiddle.net/w8kQA/7/
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 am trying to be clever and position a FaceBook Like button iframe inside a sentence but it aligns oddly, see screengrab below.
I'm sure I'm being dense but without styling the iframe as a block element how do I re-position it?
I tried display:inline-block but it didn't respond to margin settings. I also tried increasing the paragraph's line-height to match the iframe but that didn't help.
Wrap it in a DIV and adjust margin-top on the DIV.
vertical-align:middle did the trick.
I have a div tag which has table header on it and the rest of the table content is in another div. I need to make the position fixed when vertical scrollbar is scrolled so that the table header will be seen on vertical scrolling.Upto this point its not a problem because using div position:fixed,it will work. But the problem is during horizontal scroll the header should not be fixed. is there any horizontal and vertical scroll event to make the position fixed and absolute?Please help
Getting elements to respond differently for horizontal scrolling and vertical scrolling sounds like it would be handled best with Javascript. CSS can give you a fixed element, but it will be fixed for both x and y scrolling.
this will help you. pure ccs: http://www.imaputz.com/cssStuff/bigFourVersion.html