0

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.

prprcupofcoffee
  • 2,900
  • 14
  • 19
user3034150
  • 5
  • 4

2 Answers2

1

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?

Community
  • 1
  • 1
Pravin Waychal
  • 2,253
  • 1
  • 15
  • 24
  • setting `position:absolute;` to `.tabcontent-inner` would work too, but it has more consecuences than `overflow:auto;` or `overflow:hidden;` I would go for one of this – frikinside Mar 26 '14 at 13:19
  • thank u!! thank u!! i have spent almost a day on it! – user3034150 Mar 26 '14 at 13:31
  • No Probs Good luck! Please note that there are other ways as well that you should know 1) applying float property right or left and width 100% 2) clearfix etc and you should apply them in the best way as per situation :) – Pravin Waychal Mar 26 '14 at 15:25
0

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
Neil
  • 390
  • 5
  • 17