Make a parent div expand to fit a div contained within it

Question

Apologies if this has been covered elsewhere. I am not a pro and I have two templates that are work in progress for the new design of my web site.

They can be seen at:

Template at

template1.aspx

shows how it works fine with just simple content.

I think the problem I have is obvious but I can not get the div id="main" to expand as the content of the tabs expand.

The relevant css files are at

www.purpleski.com/css/fws2.css www.purpleski.com/css/menu.css www.purpleski.com/css/indexpage_only.css

Hope somebody can help.

Thank you.

michael

[probably floats issue](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504) — Mr. Alien, Jun 26 '14 at 18:32
slightly off topic, but the title at template.aspx says 'purle ski' instead of purple :P — PugsOverDrugs, Jun 26 '14 at 18:41
work in progress. These things are not important at the moment! — user3780484, Jun 26 '14 at 20:11

score 0 · Answer 1 · answered Jun 26 '14 at 18:41

0

#tab-content1 is positioned absolutely, so it takes 0px height (element is moved from document).

Remove position: absolute (and float left from parent LI -- or set width to parent LI).

answered Jun 26 '14 at 18:41

pavel

Hi thanks for this. Followed your instructions but this pushes the tab 100% of the width of the main div and the other tabs below the first tab. See http://www.purpleski.com/templateMain.aspx – user3780484 Jun 27 '14 at 15:10
What you exactly need? `.tabs {overflow: hidden;} .tabs li {float: left; width: 33.3%}`? – pavel Jun 27 '14 at 17:31

score 0 · Answer 2 · answered Jun 26 '14 at 18:42

0

You can change css of div id="main" to like this in template2.

#main {
    margin: 0 auto;
    padding: 10px;
    position: relative;
    width: 920px;
    bottom: 158;
}

and for template 1 remove position:absolute from tab-content1 class.

answered Jun 26 '14 at 18:42

Mayank

score 0 · Answer 3 · answered Jun 27 '14 at 20:51

0

Hi managed to get it to work with different code

It is good. Just have to watch the different files jquery files beng called and in what order they are on the page.

Thanks for everybody's help.

answered Jun 27 '14 at 20:51

user3780484

3 Answers3