ansaurus

Question

HTML/CSS - Inner-Div 100% Height across multiple columns?

Answer 1

A:

I know it's not the best solution but maybe Faux Columns might help anyway. See http://www.alistapart.com/articles/fauxcolumns/

kschaper 2010-06-22 07:24:44

This is a great solution in some cases, but if you see my EDIT it won't work across dynamically different columns.

Kerry 2010-06-22 07:44:12

Answer 2

+1 A:

This is actually an age old question perhaps not on SO but in CSS generally. There are a couple of ways you can do it. One is by using a background image - this will be hard as you have a fluid layout - if you fix the width of the column you are having a problem with this will work or you could send the position of the image using a percentage in this case 33%.

Two you can wrap a div around the other columns so you the shorter column takes on the height of the other two - this is quite complicated.

Three - don't worry about it make of feature of it. The thing about this is that if you get it sorted for one column suddenly the 'client' decides they want less content in one of the other columns so then you will have the problem there too.

matpol 2010-06-22 07:28:59

This is going to be a service-site and the content will literally be changing on the fly (without a refresh), which is why I'm looking for a solution that handles it completely. So far it looks like its not possible. The HTML can't change on a per-column basis -- manually adjusting the high via jQuery is easier. Thank you for your suggestions!

Kerry 2010-06-22 07:45:44

Answer 3

+1 A:

Another option could be display:table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>equal heights</title>
  <style type="text/css">
  #container
  {
    border:1px solid #000;
    display:table;
  }
  #container div
  {
    display:table-cell;
    width:200px;
    border:1px solid red;
  }
  </style>
<body>

<div id="container">
  <div>eins</div>
  <div>zwei<br />zwei<br />zwei<br /></div>
  <div>drei</div>
</div>

</body>
</html>

Unfortunately it's not well supported by some browsers, see http://reference.sitepoint.com/css/display or http://www.sitepoint.com/books/csswrong1/

kschaper 2010-06-22 07:41:14

I think this is a great option though we do need cross-browser support. Another thing that complicates this is that it is almost a Zen Garden layout -- it can easily flip from being horizontally next to each other to being vertically stacked (if they have more than 5 sub-sections).

Kerry 2010-06-22 07:49:36

Answer 4

+1 A:

I have always used this method and it has worked like a charm: http://www.positioniseverything.net/articles/onetruelayout/equalheight

I tried it using Firebug on your site and using:

.content {

...

padding-bottom:9999px;

margin-bottom:-9999px;

}

seemed to fix it. Let me know if it works for you.

CaroCaro 2010-06-22 22:08:57

That's an interesting thought/hack -- how does that perform cross-browsers? It makes me a bit on edge that something could easily go wrong with it

Kerry 2010-06-22 22:33:38

Didn't work in my case

Kerry 2010-06-22 22:40:26

ansaurus

tags:

views:

answers:

HTML/CSS - Inner-Div 100% Height across multiple columns?

related questions