How do I make a div that has a variable width? So I want a div to span a certain width inside a container and if there is another element in it, the div will automatically fill a portion of the of the width.
Don't give the div a width and it will fill 100% of the horizontal space. Add margins to it (as either % or px) and it will shrink accordingly.
It sounds like you may be asking how to have something inside the div force it to grow wider with its content. I don't think that's possible without javascript.
Related
I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:
Create a container with fixed dimensions.
Place a scrollable container inside and attach the animation.
Place the labels.
The animation partially works, but the scrolling doesn't go all the way to what is configured (translateX(-100%)).
The overflowing part (green color in codepen) that exceeds the fixed container width is ignored.
I've tried various display and flex field combinations, but noting.
Here is a codepen sample.
https://codepen.io/efthymiosks/pen/QWQGVGg
The issue is that 100% is the size of the element, not the content. What I mean by this is because the content overflows the element, 100% only refers to the visible width of the container.
You need to change 100% to something else such as 150%. Unfortunately, this means that you need to know the width of the contents before. The only other way that I know of is using JavaScript to calculate the width of the contents.
Codepen
I'm hoping I can use flexbox to solve a div stacking problem.
I have one container div. Its height is 100vh.
Inside that div, I have two divs.
One, contains an image. Its height is dependent on the size of image, which grows proportional to browser width up to a max-width.
A second div is on top of the first div. I want its height to be equal to the remaining height of the div.
Can flexbox compute this for me automatically? Hoping so.
The answer is yes. Try appying flex: 1 to the second div. That tells it to stretch to fill the remaining space in the container.
Here's an illustration of the effect: DEMO
I hope the title was clear enough to get the general idea. The problem itself is a little bit trickier. To help with the understanding see my illustration below.
Since I don't have enough reputation points to include the illustration directly, here is a link to it on flickr.com: http://www.flickr.com/photos/cumbrowski/12009919663/
Or link to image here at Stackoverflow.com: http://i.stack.imgur.com/1Kswi.png
Phrasing it out in full-text.
The outer-most container should always be vertically and
horizontally centered in the available browser window. Both Width
and Height are dynamic, but the height cannot exceed 90% of the
available window height.
The inside of the container has 3 containers.
The top-most container has a fixed height but the width should span
the entire outer container width.
The bottom-most container should also span the entire width of the
outer container, but it's height can vary, based on it's content.
Preferably, If the container is empty, the height should shrink to 0
(if possible).
The center-most container controls the width and height of the
outer-container, except, if the total height of the outer container
would exceed the maximum of 90% of the available window height. In
that case the center-container should show scroll bars.
NOTE:
If there is no pure CSS based solution possible and the help of JavaScript needed, okay, sad, but if necessary, what can I do?! jQuery would be okay in that case as well.
I'm trying to get an iframe to behave like a normal non-floating DIV does. i.e. occupy full width of parent. Is this possible? Looking for something equivalent to saying display: div;
Edit: I'm not looking for width: 100% since i have another floating element to the left. A non-floating DIV would take the rest of the space on the right. This is the behavior i'm looking to achieve.
Working: With a DIV on the right - http://jsbin.com/onaxax/1/edit
Not Working: With an IFRAME on the right - http://jsbin.com/erapuv/1/edit
You have to wrap your iframe in element with overflow:hidden that would occupy the remaining space, and than set the iframe's width to 100%.
Example.
Basically I have float divs with fixed width of 250px. I need to make it so that the width of a parent div and the width of the browser resize automatically based on the amount of float divs i add.
For example: if my browser size is 800px wide and i have 2 float divs which combined are 500px wide than there will be no horizontal scroll bars because 500 fits inside 800. But when i add 2 more float divs the total width of all float will be 1000px which is bigger than my browser width thus creating horizontal scroll bars and making the browser resize automatically.
Right now when i try to do it, float divs that dont fint inside 800px just drop down instead of adding on the side.
I could specify fixed width of parent container but the whole point is to make float add to the side dynamically.
Any suggestions? If CSS can't do it maybe Javascript can.
Is there a Javascript that will explicitly add width to the parent div whenever child divs are added?
Thanks.
use width:reminder; to the parent DIV.