CODEWITHSUNDEEP
c#csshtml
user3034150
user3034150

Reputation: 5

How to resize a div element automatically so that the content fits

I need to do a lot of divs inside other divs, and I can't seem to understand what is the problem with my code, so the divs do not get the height of the divs below the- and everything is a mess!

my aspx code:

<div class="tabcontent">
    <div class="tabcontent-inner">
        <div class="tabcontent-inner-left grid_20">

        </div>

        <div class="tabcontent-inner-right grid_20">

        </div>
    </div>
</div>

my stylesheet css:

.tabcontent-inner {
    width: inherit;
    padding: 10px 10px 10px;
    margin-top: 10px;
    margin-bottom: 1px;
    position: relative;
    display: block;
}
.tabcontent-inner-left {
    padding: 20px 20px;
    border-left: solid 1px #ddd;
    width: 45%;
   float: left
}
.tabcontent-inner-right{
    padding: 20px 20px;
    border-right: solid 1px #ddd;
    width: 45%;
    float: right
}

Basically, I want the tabcontent-inner div to get the height of what is inside of it.

Upvotes: 0

Views: 1269

Answers (2)

Neil
Neil

Reputation: 412

Add this code to Your CSS

.clearfix:after {
 content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}

and

change 

<div class="tabcontent-inner">

to

<div class="tabcontent-inner clearfix">

Semi colons are missing in the css after 

float : left

and

float : right

Upvotes: 0

Pravin W
Pravin W

Reputation: 2521

this is because on parent .tabcontent-inner you need to put overflow:auto property so that it will cover ups its children's height

you can find more suitable answer here How do you keep parents of floated elements from collapsing?

Upvotes: 1

Related Questions