Menu
Kind of a weird example, but here goes:
How do I get an absolutely positioned DIV to expand when content is inserted that goes beyond its borders? Here is the code:
<html>
<head>
<style>
* {margin: 0; padding: 0;}
body {white-space: nowrap; text-align: center; color: white; font-size: 2em;}
div#container {position: relative; height: 100px; width: 50px;}
div#a {height: 50px; width: 25px; background-color: red; position: absolute; top: 0; left: 0;}
div#b {height: 50px; width: 25px; background-color: blue; position: absolute; top: 0; right: 0}
div#c {height: 50px; width: 25px; background-color: orange; position: absolute; bottom: 0; left: 0;}
div#d {height: 50px; width: 25px; background-color: purple; position: absolute; bottom: 0; right: 0;}
span#title {position: relative; overflow: visible}
</style>
</head>
<body>
<div id="container">
<div id="a"><span id="title">This is my title</span></div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
</div>
</body>
In the example above, the content in DIV "a" is hidden (due to the width/height restrictions). If we set this to "min-height" and "min-width" the content just sits "behind" the other divs, but doesn't move them. How can I accomplish this?
Note: I'm trying to figure this out, as I need to "reposition" the order in which DIVs are ordered in the HTML (I'm trying to make a child template in Wordpress). Any examples/resources are GREATLY appreciated.
Cheers, Sapiensgladio
492
You can use min-height and min-width to define the minimum values for those dimensions, which will be expanded to accommodate new/additional/larger content as necessary.
You can couple with the max-height and max-width attributes, which will allow the elements to move from the minimum, as necessary, to the maximum permitted value for the dimension.
Example CSS:
#content {
position: absolute;
min-height: 5em;
max-height: 15em;
min-width: 5em;
max-width: 15em;
border: 1px solid #f90;
bottom: 0.5em;
right: 0.5em;
overflow: auto;
}
JS Fiddle demo.
The above demo uses jQuery to add extra content to the #content div, but that's just for dynamic demonstration purposes, the jQuery is not, in any way, required for the css to work.
81
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
