CODEWITHSUNDEEP
css
s1k3s
s1k3s

Reputation: 71

How to make a CSS div set auto height to content

I this strange CSS problem. I have two boxes like in the code bellow:

#mainbox{
    width:100%;
    position:absolute;
    top:300px;
    left:0px;
    min-height: 700px;
    background-color:#0052b0;
    display: inline-block;
}

#contentbox{
    width:80%;
    position:absolute;
    left:10%;
    background-color:white;
    border-width:5px;
    border-style:solid;
    border-color:#0052b0;
    min-height:700px;
    top:-50px;
}

#contentbox is inside #mainbox. The problem is that when content height exceeds the inner box limit, the inner box will increase it's height, to wrap the content. But this doesn't happen to #mainbox, which is the outer box.

Can anyone help me get this fixed?

Upvotes: 0

Views: 66

Answers (1)

Josh M
Josh M

Reputation: 992

Remove the position:absolute; and replace it with position:relative;

#contentbox{
width:80%;
left:10%;
position:relative;
background-color:white;
border-width:5px;
border-style:solid;
border-color:#0052b0;
min-height:700px;
top:-50px;
}

Upvotes: 1

Related Questions