Question

I have this javascript code:

$(document).ready(function() {
    var leftHeight = $('#maincontent').height();
    $('#sidemenu').css({'height':leftHeight});
});

This works, but it is very limited. If my #sidemenu, is getting expanded (Example because of sub-menu), it become bigger inside the div.

How can I do so whenever #sidemenu or #maincontent for that matter, get’s bigger (height increases), they follow each other.

If this can be done with CSS, I am open for this too.

Regards.

Answer 1

Forget javascript.

Put #sidemenu into #maincontent, give it a fixed width and float it left. Then wrap everything in #maincontent (but not the #sidebar) into a div called #wrapper (lets say). Give #wrapper a width which equals the width of #maincontent minus the width of #sidemenu and float it left too. For good measure just before the closing </div> of #maincontent put <br style="clear: both" />.

Now #maincontent will expand to fit the sidemenu (if it needs to), but the content in #maincontent will also not wrap underneath the #sidemenu if its too short, as its in a wrapper div of its own.

Hope this helped.

update

here is an example:

html

<div id="maincontent">
  <div id="sidemenu">
    <ul>
      <li><a href="#asd">A Link</a></li>
      <li><a href="#asd">A Link</a></li>
      <li><a href="#asd">A Link</a></li>
      <li><a href="#asd">A Link</a></li>
      <li><a href="#asd">A Link</a></li>
    </ul>
  </div>
  
  <div id="wrapper">
    This is where your text goes in the main content area of the site.
  </div>

  <br style="clear: both" />
</div>

css

#maincontent {
  width: 960px;
}

#sidemenu {
  width: 330px;
  float: left;
}

#wrapper {
  width: 660px;
  float: left;
}