I have a main parent div that is .resizable(). One of it's child divs, say bottomChild has alot of other child div's, which resize as well. However, they have text and this text does not resize and so overlaps with other sibling div contents. What i want is for them to not resize, but for a scrollbar to appear so that the user can scroll through the bottomChild and see the content. I have a GridView in another child Div, say topChild, and this happens for the GridView automatically. I want to simulate this for bottomChild as well. Does anyone know how?
Heres a running sample - http://jsfiddle.net/xgCDy/33/
Try and resize the black parent div and see the content overlap.
I've solved your problem:
http://jsfiddle.net/WGknf/embedded/result/
just remove some extra code :D
http://jsfiddle.net/WGknf/
dont use relative(%) height. when you use draggable div!!!!
Related
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
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 my menu working the way I want with the exception that menu elements are displayed from the top down as supposed to bottom up. I tried changing the CSS properties, but still can't get it working. I need my DIV container to be align on the bottom of the parent container. I used 'bottom: 0' CSS property but that doesn't have any affect using both 'position: absolute' and 'position: relative'.
How can I align all the elements within the parent DIV be displayed at bottom: 0 (bottom up)?
Then click on the Projects bottom link (refresh if you need to reset the menu items). I need that same behaviour I already have, just the menu items should start from the bottom up and be aligned all the way to the bottom.
Any suggestions?
Thanks,
Partizan
The best way to accomplish this is to either put the divs inside the sought after parent element. Ergo the <li> you want to associate these links with. Give the parent <li> a style of position:relative. The on hover set the position of the child div or li to abosulte and left:0;top:0;. Then from there you can style it closer or farther with margin.
Try using padding-top to push them down with an id or class on each sub menu.
Then if that fails, try using min-height: auto; on each parent.
I'm having a few problems trying to position some divs in my website layout. All of them is related to the div's size. I'm using Chrome's developer tools to inspect the divs and when I mouse over some divs it is just 1px-high, but it has content inside and its content has some height. Shouldn't it have at least the same height of its content?
I don't know if I explained well, so I'm posting some images. I'm using Blueprint CSS Framework and it happens when I use class="span-XX" and inside it I don't use neither class
Here is some images (click to zoom)
The parent div
The div with problem (no height)
The child div
The parent div has class="span-XX", the div with problem has only #search
which is this one
I suspect it is some float or positioning issue with css but I don't know what it is and how to deal with it. I have also a list containing the social networks on the top of the site which ul has the same problem.
If you have floats inside, you need to clear them. Apply overflow:hidden; zoom:1; to the parent containing the floats and it should resolve it.
If you have negative margins / position + relative and negative offset and cant use overflow hidden use a clearfix... http://work.arounds.org/clearing-floats/
Your child div has the float property set, so the parent div will not expand height-wise to contain it. To get the behavior you expect, set overflow: hidden on the parent div.