Fixing height to be *at least* a certain number of pixels? 3

[jisoo23]

Hey everyone,

This may or may not be a simple question, I'm pretty new to CSS and dabbling in it a bit. Using CSS, I created a fixed-width 2-column layout using all DIV tags and an external CSS file. The width of the entire layout is fixed, which is fine. But depending on how much material is in the content area, the height of the layout becomes variable.

The question is, is there a way to set it so that the height is at least 600px, then let it expand longer if necessary? Any suggestions are appreciated.

Thanks,
Jisoo23

 

[BillyRayPreachersSon]

Sure - you can use a CSS hack to do this cross-browser:

div#yourDivsId {
   min-height: 600px;
   _height: 600px;
}

The first property is for Firefox, Netscape, Safari, and other browsers that support it, the second for IE-only.

While you could just set "height" to 600px, doing so in Firefox would cause undesired behaviour for things like background colours and images whenever the content went over that.

If you need your CSS to validate, consider using IE conditional comments instead.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

If you need your CSS to validate, consider using IE conditional comments instead.

More about these are available here:

http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

And a recent article here that was interesting if you ever wanted to use conditionals to hide content from IE:

http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/

Continuing on from Dan's suggestion, here is how you could do it using conditional comments:

<style type="text/css">
  div#yourDivsId { min-height:600px; }
</style>
<!--[if IE]>
<style type="text/css">
  div#yourDivsId { height:600px; }
</style>
<![endif]-->

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[ChrisHunt]

If you need your CSS to validate, consider using IE conditional comments instead

Or just do this, which is valid CSS and has the same effect:

div#yourDivsId {
   min-height: 600px;
}
* html div#yourDivsId {
   height: 600px;
}

Conditional comments are a pain - to use them, you have to add them to every HTML page.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[jisoo23]

Hey thanks guys, this is exactly what I needed. Stars all around! =)

 

[BillyRayPreachersSon]

Excellent news. Good luck with the site!

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]