CODEWITHSUNDEEP
htmlcss
Fedoranimus
Fedoranimus

Reputation: 826

Parent not sizing to child's padding

http://codepen.io/anon/pen/Keisz/ <-- simple example

This codepen mimics an issue I'm having. I want the parent elements (outer and inner containers) to fully encompass their content (the content div) - I'm at my wit's end of how to accomplish this and I'm almost certain it's a simple fix.

Applying

box-sizing:border-box;

to the child element is not what I want. I want the parent to resize to child, not the other way around.

Any help you could provide would be most appreciated!

EDIT: I think there is some confusion. I want the parent to dynamically resize to contain the largest child width + padding. The max-height is also a requirement, sadly. :(

Upvotes: 1

Views: 1138

Answers (3)

JoyalToTheWorld
JoyalToTheWorld

Reputation: 140

Remove the height and width attributes from the content div. Voila

http://codepen.io/anon/pen/pluAk/

Upvotes: 3

LOTUSMS
LOTUSMS

Reputation: 10240

Not sure what is the ultimate purpose of why you are doing this, but assuming that it would help, this is an idea 

#innerContainer {
    display: block;
    overflow: hidden;

}

FIDDLE

Upvotes: 0

Anubhav
Anubhav

Reputation: 7208

Unless you apply box-sizing:border-box; the parent will not take into account the padding while wrapping around the child divs. You need to apply this style. Otherwise the code you've posted works just fine (it neglects the 20px padding on the innermost div and the parent wraps around the width of the child div minus the padding on thew child div).

Just remove the max-height from the parent div and you are good to go

Upvotes: 0

Related Questions