Menu
I can't seem to figure out why my info-container div won't adjust its height based upon its contents. I do have a floating div within it and I think it might be causing the problem, but I'm not completely sure. I have a link to jsfiddle where you can see the CSS and some HTML if it helps. Any help is greatly appreciated!
Here is the CSS for the info-container ID holding the float and all other information
#info-container{
position:relative;
padding-bottom:20px;
padding-top:20px;
padding-left:10px;
padding-right:10px;
margin-left:auto;
margin-right:auto;
background:#6F90A2;
min-width:1000px;
max-width:1000px;
clear: both;
height:auto;
}
http://jsfiddle.net/r35K4/
446
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
For proportional resizing purposes, it makes matters extremely simple: Define the width of an element as a percentage (eg: 100%) of the parent's width, then define the element's padding-top (or -bottom) as a percentage so that the height is the aspect ratio you need. And that's it!
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
Add overflow:auto; to #info-container.
jsFiddle example
Floating the child element removes it from the document flow and the parent will collapse. By adding the overflow rule, the desired behavior is restored.
128
#info-container{
overflow: auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
