DIV height not resizing - css

Question

Hi I have a container div for a page (called innercontent) and within that I have a div called tabs2. Tabs2 contains a tabbed navigation that allows content inside a div (within tab2) change. The content inside the div varies, so the height should expand itself if there is a lot of content in that div. The problem is that when changing the tabs in the content area, the div does not resize automatically, so the content cannot be seen. Here is the code:
CSS:
.innercontent {
overflow: hidden;
background-color:#FFF;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
.div2 {
position: absolute;
visibility: hidden;
width: 100%;
left: 0;
}
HTML:
<div id="tabs2">
<ul>
<li id="One">One
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Two">Two
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Three">Three
<div class="div2">
<p>Insert content here</p>
</div>
</li>
</ul>
</div>

Answer 1

Are you sure they have to be absolute? As I don't think they need to be.You could look at using something such as jqueryui http://jqueryui.com/tabs/
Alternatively, amend your html and it should be easier.Essentially move the content divs outside of the but have a data-attribute that links them to a specific link. I'm assuming you use some js at the moment to manipulate showing and hiding as you currently have visibility:hidden. I've changed this to display:none in my example (as visibility still occupies space in the document. When a user clicks a link, hide all the divs by default, then show the one with the correct matching data-attribute.
I've created a fiddle at http://jsfiddle.net/9bH7s/ that shows this and the code is below.
html
<div class="innercontent">
<div id="tabs2">
<ul>
<li id="One">One
</li>
<li id="Two">Two
</li>
<li id="Three">Three
</li>
</ul>
<div class="div2" data-id="first">
<p>Insert content here</p>
</div>
<div class="div2" data-id="sec">
<p>Insert content here</p>
</div>
<div class="div2" data-id="third">
<p>Insert content here this has a lot more <br /><br />and some more content</p>
</div>
</div>
</div>
css
.innercontent {
overflow: hidden;
background-color:#efefef;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
#tabs2 ul li{
float:left;
list-style:none;
margin-left:10px;
}
.div2 {
display:none;
width: 100%;
clear:both;
}
js
$('#tabs2').delegate('a','click',function(){
$('.div2').hide();
$('.div2[data-id=' + this.id +']').show();
});

Answer 2

1st change::dont indicate any height for .tab2..it will take an automatic height corresponding to the item that it contains
2nd change: you have made position:absolute; and expecting it to be dynamic.how that can be possible.remove it..either make it position:relative; or better choice is not to mention position property at al ...you can use margin-left:100px; to position your div