Ive got a container div with overflow:scroll;. It contains a tiled background div (width:100%; height: 100%;) with lots of draggable divs over the top.
When the draggable divs make the container div overflow, how do I get the tiled background to cover the overflow as well?
Thanks!
As #schellmax suggested in the comments, the obvious solution would seem to be to apply the background-image to the container div, instead of another div inside that. That would be the most elegant solution.
If that's not a possibility, such as when you want to use a transparent repeating background-image over the container div's background, then you might try not specifying a specific width on the inner div (width: auto or width: inherit). Then, for the height, you may try height: inherit. If that doesn't work (I haven't tested it), perhaps a javascript solution is in order - although still, I'd rather go with what I said in the first paragraph.
Related
I have a container div with three child divs. see attached.
the center div can dynamically stretch in height. what I want is if the container div would stretch with the center div, then the left div will stretch to fit the new container div, and therefore stay in sync with the center div.
any one knows a pure css way to do this?
This doesn't actually adjust the height of the column, but the only non-javascript way to achieve this effect without actual content pushing the height down is using faux columns. You apply a background image to the parent element that mimics the column. Doesn't apply as well to responsive design, but the good folks at A List Apart do a better job of explaining the method here http://www.alistapart.com/articles/fauxcolumns/
yes that makes sense if you have a bottom-border. Let us know if you need help with the javascript. There will be no pure CSS way to accomplish this though. You have to find the height of the center div with javascript, and tell your left div to be the same height.
Is this possible with css (I can probably manage it with javascript):
Its basically a margin: auto effect, but i want a different background for each margin, so i'm looking for divs with auto-widths on either side of the (fixed-width) center div if that makes sense. Probs better visualized:
http://jsfiddle.net/guc9V/1/
Bit of a hack but it works.
I didn't use your width value as jsFiddle would need resizing to see how it works.
This essentially tells the divs to act as table-cells, so they will fill the containing div, which acts as the table. If you didn't specify the width of the middle div, each column would be 33% wide.
I have a div (div#slideImage) and within a few images.
But this is not div by adjusting the images inside that div.
See the full page.
Note that the size of the div (width: 75px; height: 28px;) is smaller than the size of the image.
I'm using the plugin jquery.cycle
This probably isn't what you were expecting, but can't you just resize the image? It seems to make more sense to me than expecting the div to do the work for you.
If you specify the dimensions of a div, then contained nodes will either be clipped or scrolled depending on the div's overflow property. Your best bet is to set the dimensions of the div to more useful values.
I have a header class which has a background and a header-center class which provides the nav content for the header. My problem is that if the window is smaller than the header-center width, the header background doesn't span the entire top when you scroll over. Stackoverflow seems to have the same problem, try resizing it and you'll see what I mean - they gray background doesn't expand over to the search box. How would I go about fixing this?
Thanks!
if the background is inside a container with a width of 100% and any parent container, including the <body> or <html> don't have a width set in the CSS then you will experience this behaviour. as 100% will be 100% of the browser viewport. Change this to a fixed width and it should stretch to fill the fixed width.
What you need to do is set a display: inline-block on your body tag. If you do this to stack-overflow's site. It fixes the problem.
This method is called "shrink-to-fit".
Here's a fiddle with the problem. DEMO
As you can see when you scroll the div doesn't expand the width of the whole screen anymore.
and here's a fiddle without the problem. DEMO
This has been answered similarly elsewhere by user473598 here How to make div not larger than its contents? you don't technically need the element to be a span though. buti-oxa's answer is worth noting as well as it notes that using this method is some what costly as it means formatting the element at least twice. Since it's being applied to the body it doesn't seem like that bad of a deal in your situation.
I have one div element at the top of my page that is set to overflow:visible. Immediately beneath it, I have the page content.
I do not want the top div to expand, because of aesthetic reasons, but I would like the content below to treat the overflow from above as it would a block element...by "clearing" it.
I know about CSS clear...but it doesn't seem to apply to overflow.
Is there a correct method to do this?
The overflow:visible doesn't really have anything to do with the issue, as it's the default.
Set the height of the top div, and put another floating div inside it for the content. The floating div will expand outside the top div, and you can use the clear style to get below it.
try
overflow: auto;
it will expand the div and should solve your problem