I have a div element with two span elements inside - one with large font size and another with no adjustments.
I want to achieve an effect where:
the first span element defines the height of the parent div
the second span element wraps to use up all the height made available by the first span while maintaining minimum width (but still grow in width when available height is used up)
What I have:
What I want to achieve:
I have tried using different variations of min-width/width:min-content and flex-basis with no success.
Thanks!
Codepen used in the examples.
Related
I am using a table based layout (using display: table properties). The container has a dynamic height (I have set min and max height properties on the container). All the inner elements within the container have their heights set to 100%. The idea being that they will always fill the available space.
The problem I am having is that elements that have display: table-cell will continue to expand above the 100% allocated space if they contain content that is taller than them. This happens even if I set overflow: auto.
I have created a jsfiddle to demonstrate the issue. Please see here:
http://jsfiddle.net/eSRA8/
In this example, the max-height of the container is 300px, but an inner element called .tall-content has a height of 400px. This makes the container grow taller than its max-height.
In Chrome this actually works how I want it to. However it does not work in Firefox or IE.
Please note that since the container height is dynamic, I can't set a fixed height on any of the inner elements (unless it is possible to use jQuery to assign the correct height on document load and on window resize, but this would need to respect the min and max height settings of the container).
Does anyone have any idea how I can achieve the desired result? I would like to keep as much of the existing structure as I can but if the same result can be achieved in a slightly different way then I'm open to that. Either way it needs to work the same in all browsers.
That looks to be a limitation of display:table;
You may be able to put the "container" in another div with max-height:300px;overflow:auto;
Here's some info which might explain why you are having difficulty:
http://www.w3.org/TR/CSS21/tables.html#height-layout
I positioned two div elements side-by-side by using float= left;
But buttons are getting displayed beside the div elements.
I want the button elements right below the two div elements which were placed side- by-side.
When you use float:left property then the div's height and width are set by either of the following
amount of space it's content html elements require
applied css height and width.
hence say if your screen if too big and space is left out on the sides then the next element (if it can be fitted in that space) is rendered (if it requires more then it would appear on the next line).
hence now regarding your problem there are two possible solution's
Increase the widths of your div so that it takes most of the screen width.(mostly never used as it might look ugly on big screens)
but if u want to go by this approach the setting the width's in percent can do the job.
Fiddle demo
use the clear:both property of css (mostly used)
for it's explanation you have to read it's documentation
i would suggest you go by this approach
Fiddle 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 have made a simple website and am happy witht he fact that I have had minimal use of div elements. I cannot explain why I do not like using divs, I just dont. That being said I have 2 elements side by side and when the browser shrinks the elements collapse one under the other (it's a paragraph with an image next to it, for ease of picturing).
Other than using position relative and adjusting pixels or wrapping the elements in divs is there a way to prevent two floated elements from changing position when the browser screen shrinks?
you could have a min-width on the container of those two elements. and if they aren't in a div, remember that <body> can also have this min-width
Try to give a width on the container for exampleboth the elements for example say
< class="element-container"> in order to seperate both the elements overlaying on each other.
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.