Home/ Questions/Q 6148693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T19:19:28+00:00

Kind of a weird example, but here goes: How do I get an absolutely

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0