Auto adjust height

Hi guys.

Im trying to get a div to auto adjust to the height of the div to its right.

You can see an example here www.littledesignplanet.co.uk/lloyd The white space div on the left i set the height manually.

Is there a way to get this to automatically stick to the same size as the main content div? As each page is going to be a different height.

Thanks, Sav

From stackoverflow

• Hmm... Why don't you just set the margin-left of #content to 400px? This would yield the same result but in a much simpler way.

  Cheers :)

  Update: if you want to make both columns equal height, there is several of techniques for this. My favourite is this one:

  <div class="container">
      <div id="whitespace">Lorem ipsum</div>
      <div id="content">Foo<br />bar</div>
  </div>
  <style type="text/css">
  .container {overflow: hidden;}
  #whitespace, #content {padding-bottom: 32767px;margin-bottom: -32767px;}
  </style>
  

  Peter Perháč : what exactly is the rationale behind padding-bottom: 32767px;margin-bottom: -32767px ?

  moff : -32767 is the minimal possible margin (at least in Safari). Thus, we set a padding-bottom of 32767px, and then remove it by setting the negative margin. This results in a lot of empty whitespace under the columns, so we add a wrapper with overflow: hidden; Boom.

  moff : I think you have to add some content to #whitespace – try adding a " " or something.

  moff : I'd suggest you to take a look here: http://www.alistapart.com/articles/fauxcolumns/

  moff : To be honest, I've got no idea of how to achieve this. However, what you're looking for is "equal-height columns", so you could play around with a Google search if you want to :)