CODEWITHSUNDEEP
htmlcss
Danield
Danield

Reputation: 125571

limit middle div width to child div width

I have nested divs like so:

<div class="first">
    <div class="second">
        <div class="third"></div>
    </div>
</div>​

The third div contains dynamic content - so I don't know it's dimensions.

What I want is the second div to take the width of the third div and not of the first div which is a lot bigger.

So in this demo, I want the border to enclose the green square. Is this possible with css only? if so, how? Thanks.

Upvotes: 0

Views: 77

Answers (3)

Shailender Arora
Shailender Arora

Reputation: 7778

Actually div is a block level element so you can give the display:inline-block to second div and than it will take the third div width & height vic-versa...

CSS

.first
{
    width: 500px;
    height: 500px;
    background: yellow;
}

.second
{
    border: 5px solid blue;
    display:inline-block;
}

.third
{
    min-width: 100px;
    min-height: 100px;
    background: green;
}

DEMO

Upvotes: 0

Aleksandrenko
Aleksandrenko

Reputation: 3065

.second { float: left; }

or

.second { display: inline-block; //not working on ie7 }

Upvotes: 1

svenbravo7
svenbravo7

Reputation: 317

Put a float: left; in the second class. That should do the trick.

Upvotes: 2

Related Questions