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.
Related
I have div which has row-fluid class and within it are two divs which are side by side. When I reduce the window size I can see the right div go under the left one. I am pretty new to bootstrap and css. Is there a way to fix this?
I need to overlap 3 images and center them within a twitter bootstrap row-fluid div. Here is an example of what it should look like:
The solution can use javascript but I'd prefer if it didn't. Also, when the browser is resized the images should remain in the center of Div 1. Anyone have any idea how to do this?
Overlaping:
http://css-tricks.com/almanac/properties/z/z-index/
To center them, use margin-left and margin-right:auto, as long as the parent has a fixed width.
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.
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.
Up to now I have two choices (maybe there are more outside):
Set the width of body tag to a fixed length and set the horizontal margin of the body tag to auto. It makes all contents get horizontally centered.
Create a wrapping div inside the body. Set the width of the wrapping div to a fixed length and set the horizontal margin of it to auto. It also makes any contents inside the wrapping div get centered horizontally.
I don't know, which one is better. Or if you have another alternative that you consider the best one, let me know.
A wrapper div is more flexible, because you never know when you're going to want an element to not be centered. A couple months down the line if the site requires changes you'll be happy you had a wrapper div, ends up being less work because you can have siblings of the wrapper div and do what you want with them.
With that said, if it's a fairly simplistic trivial example/site, sure go ahead and 0 auto the body element.