CODEWITHSUNDEEP
htmlcss
zero
zero

Reputation: 3084

child with min-width grows to size of parent

I have a <div> that I want to center (margin auto) and grow as content fills it, so I'm using min-width and min-height to accomplish this, but what's happening is the child <div> is taking on the parent's(<body>) width instead.

How can I prevent this from happening?

example: http://jsfiddle.net/kRF5d/1/

Upvotes: 1

Views: 1891

Answers (4)

chheplo
chheplo

Reputation: 211

Just change position to absolute from relative.

#top {
    min-width:10%;
    min-height:50px;
    background-color:blue;
    position:absolute;
    margin:auto;
    margin-top:10px;
    top:0px;
    z-index:10;
}

Upvotes: 1

Jon Schroeder
Jon Schroeder

Reputation: 317

The problem you're seeing is because min-width sets the minimum width, it doesn't limit the maximum width. So because divs display as block-level elements, it automatically grows to the same width as the parent element.

So while I don't know specifically what you're trying to accomplish with this, that's the reason it's not working as expected.

Upvotes: 0

Nick Beranek
Nick Beranek

Reputation: 2751

Since div is a block-level element, it's going to fill the entire width of the parent unless a proper width is set. I recommend applying display: inline-block; to the child div.

Upvotes: 1

Philip Kirkbride
Philip Kirkbride

Reputation: 22879

If you don't want your #top div to be %100 width then give it a width.

http://jsfiddle.net/kRF5d/3/

Upvotes: 0

Related Questions