Div Container Not Wrapping Around Child Content

Question

I'm creating a "rounded corners" container that I'll be using for custom popups and tooltips. Originaly, I have used 3x3 table with my rounded pngs as the corner content.

These rounded pngs are 24x24 and you can see how it instantly forces a 24px margin for my inner content. I'm wanting to convert the markup to Divs for more margin/padding flexibility.

I really want that 24px gradient on top for the professional look. I'm almost done with the Div container but I'm up against a HARD stump! I can't get the container div to dynamically expand to encompass the child content! Here's my code so far. For clarity on your part, I've removed the background images and replaced them with a simple background color.

<div id="container" style="position: absolute; width: 200px; height: 100px;">
        <div id="topLeft" style="background-color: Aqua; position: absolute; width: 24px;
            height: 24px; top: 0px; left: 0px;">
        </div>
        <div id="topRight" style="background-color: Aqua; position: absolute; width: 24px;
            height: 24px; top: 0px; right: 0px;">
        </div>
        <div id="bottomLeft" style="background-color: Aqua; position: absolute; width: 24px;
            height: 24px; bottom: 0px; left: 0px;">
        </div>
        <div id="bottomRight" style="background-color: Aqua; position: absolute; width: 24px;
            height: 24px; right: 0px; bottom: 0px">
        </div>
        <div id="topFill" style="background-color: Lime; position: absolute; top: 0px; left: 24px;
            right: 24px; height: 24px;">
        </div>
        <div id="leftFill" style="background-color: Yellow; position: absolute; width: 24px;
            left: 0px; bottom: 24px; top: 24px;">
        </div>
        <div id="bottomFill" style="background-color: Lime; position: absolute; height: 24px;
            bottom: 0px; left: 24px; right: 24px;">
        </div>
        <div id="rightFill" style="background-color: Yellow; position: absolute; width: 24px;
            top: 24px; right: 0px; bottom: 24px;">
        </div>
        <div id="middleFill" style="background-color: Fuchsia; position: absolute; left: 24px;
            right: 24px; top: 24px; bottom: 24px;">
        </div>
        <div id="contentContainer" style="top: 0px; left: 0px; white-space: nowrap; position: absolute;">
            ALongStringOFTEXTThatDoesNotBreakToForceTestIfTheDivWillProperlyExpand
        </div>
    </div>

Thanks to anyone who can pull me out of the mess! By the way, this post has been after many hours of research and loss of sanity. ;-)

score 3 · Answer 1 · edited May 23 '17 at 11:54

3

Please see this question

how to wrap float div around absolute position divs?

All your DIVs are no longer part of the object flow. So the container does not wrap around them. I am facing the same problem and I guess we have to rely on JS to set the height of the container manually.

edited May 23 '17 at 11:54

Community

1
1

answered May 14 '12 at 16:46

Raffael

800
7
18

score 1 · Answer 2 · answered Oct 12 '11 at 16:39

1

You fixed the container height to 100px. It's no wonder the other divs are not showed. Remove the height:100px part, and if really necesary add overflow:hidden and the container will get the height by himself.

answered Oct 12 '11 at 16:39

sticksu

3,660
3
23
41

Apparently you haven't tried the code for yourself. The containing div collapses if the width and height values are removed. overflow:hidden doesn't work either. I would much rather use a table because it will dynamically expand beyond it's width value if the content is greater than it's bounds. But (sigh) I would be back to my original problem. – RichardB Oct 13 '11 at 02:29

score 0 · Answer 3 · answered Aug 09 '13 at 19:01

First of, you need to learn to use a cascade styling sheet (CSS). This will cause a million less problems and can allow you to do so much more. If you decide to use a css you can even round the corners of your parent div without an image!! Wooo! I know it's crazy to think but it is true.

I couldn't tell exactly what you waned to do but you can try something like this: (HTML)

<div class="wrapper">
    <div class="topR">

    </div>
    <div class="topL">

    </div>
    <div class="content">

    </div>
    <div class="bottomR">

    </div>
    <div class="bottomL">

    </div>
</div>

Now for the styles: (CSS)

.wrapper {
margin: 0 auto; /* Centers the div */
border-radius: 4px 4px 0 0; /* this will round the top two corners of the main container */
background: #ffffff;
width: 200px;
}

.topR{
float: right;
background: #ffffff;
width: 24px;
}

And so on. if you have a div class="wrapper"> or main container to hold these in with out a fixed height on it you should be fine.

You can also always do overflow: auto; which will hide anything that goes out of the container and allows you to scroll threw the content inside that div.

Best of luck and I hope I helped you at all.

Div Container Not Wrapping Around Child Content

3 Answers3