1

I'm working on pages whose content area's size changes according to the amount of content within it. The problem with this is if there isn't enough content in this area, it's area isn't big enough to match the height of a sidebar that's next to it. I was wondering if there was a way to assign some sort of minimum height property, so that if there isn't enough content, it will just default to that height. This sidebar's height also varies from page to page, so I would also like to know if there's a way to refrence it to the height of that element instead of an absolute value.

Brendan
  • 164
  • 2
  • 10

2 Answers2

3

In CSS2 compatible browsers you can use min-height: http://www.w3.org/TR/CSS2/visudet.html#min-max-heights

Though for non-compatible browsers (ahem IE6) you'll have to find another way to implement it.

You can see css property compatibility here: http://www.quirksmode.org/css/contents.html

wajiw
  • 12,239
  • 17
  • 54
  • 73
  • Some of this sites user could be using IE6 and I would like to make it compatible. Is there a way to do this within the actual html code? – Brendan Dec 17 '10 at 20:25
  • @Brendan There are ways to make IE6 behave... for instance: http://code.google.com/p/ie7-js/ – Šime Vidas Dec 17 '10 at 20:40
  • 1
    For elements that have `overflow: visible`, IE6 will treat `height` as `min-height` (another bug). Set `height` in a IE6-only stylesheet (behind a conditional comment, for example). – Quentin Dec 17 '10 at 20:40
  • 1
    @zzzzBov has an ie6 hack you can use to fix your problem :-) – wajiw Dec 17 '10 at 21:06
2

Firstly, you ought to know the following:

  • Content belongs in HTML (Model)
  • Styles belong in CSS (View)
  • Interactions belong in JavaScript (Controller)

CSS can be placed within HTML in style attributes, although it should be avoided unless necessary.

The CSS property min-height does what you're looking for, although doesn't work in IE6. There is a fix for IE6, it goes as follows

.yourstyle
{
  height: auto !important;
  height: 500px;
  min-height: 500px;
}

Make sure your height and min-height values are identical.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • Is there anyway within css that, instead of using an absolute value for this height, I could tell it to use the height value of another element within the page. Or does that have to be done with a script? – Brendan Dec 17 '10 at 20:46
  • 1
    @Brendan I haven't tested this, but I assume percent values would work for the parent (ie height: 100%; min-height: 100%). You can't choose any other element within the page. From the sounds of it, you're just looking for a way of having equal-height columns in a multi-column layout. The quick solution is to give the parent of the columns the background you want displayed down the page. – zzzzBov Dec 17 '10 at 20:50
  • Here is a link to a example of a page within the site that is doing what I'm trying to explain: http://www.triptac.org/HelpDesk/TAG/Default.html The main content area of the page isn't as tall as the sidebar next to it. The sidebar and this content area both have the same parent element. However, if I use 100% for the value of min-height, it doesn't work, although from everything I've seen it should. Maybe you could take a look at it and see if you have any ideas? – Brendan Dec 17 '10 at 20:56
  • @Brendan use a background image on the parent with repeat-y, set the colors in the background image to match what you want on the page. – zzzzBov Dec 17 '10 at 21:01
  • Unfortunately that's not an option here because the sidebar and the parent share the same background color, but the content area needs a different one to distinguish it from the sidebar. Do you have another suggestion? – Brendan Dec 17 '10 at 21:04
  • **background-image** is what i said, not **background-color** make the image two colors. – zzzzBov Dec 17 '10 at 21:05
  • I'm sorry for the miscommunication, but I'm aware that you were talking about a background image, but I can't use that because the width of the entire area changes as well. So I wouldn't be able to make an image of two colors, because the position of that line of distinction would vary. – Brendan Dec 17 '10 at 21:09
  • if one width changes and not the other, you could still use a positioned background image with a background color. – zzzzBov Dec 17 '10 at 21:19
  • Yeah, unfortunately they both change, but I figured out a solution, albeit, a fairly messy one. I got to it with your help though. Thank you for your time and patience. – Brendan Dec 17 '10 at 21:21