CODEWITHSUNDEEP
html
RichardB
RichardB

Reputation: 339

Div Container Not Wrapping Around Child Content

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. ;-)

Upvotes: 2

Views: 10709

Answers (3)

Josh Powell
Josh Powell

Reputation: 6297

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.

Upvotes: 0

Raffael
Raffael

Reputation: 810

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.

Upvotes: 3

sticksu
sticksu

Reputation: 3738

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.

Upvotes: 1

Related Questions