Are conditional statements possible in css?

[kuau]

I have a problem with the footer coming up to the bottom of the left column whenever it is shorter than the right column. The css for the footer includes:

#footer { float:left; clear:both; }

which I though would handle that issue, but it does not. The left column is float:left and the right column is float:right;

Is there a way to say for the left column:

{ minimum-height:600px; } ?

Or is there a way to put conditional statements in css? ie. if leftcol:height < rightcol:height or whatever?

I would love to be able to do, for example:

if($var = $page) { background:url(/img/bg1.gif) } else { background:url(/img/bg2.gif) }

The first question is a bit pressing; the second is a wish list. Thanks! e

[TheJoshMan]

yes conditional statements are possible in CSS, but they only argue browser types. You use them as "comments". However, you cannot put the statements in the CSS file itself. You have to put it in the HTML file since a CSS conditional statement is in the form of an HTML comment. See below:



<!-->
Special instructions for Internet Explorer would go here
p{
margin:10px !important;
}
<![endif]-->


Or if you prefer you can make it more browser specific by adding EXACTLY which browser to change the settings on, like this:


<!--[if IE 5]>
This would change settings according to whether or not the user is using Internet Explorer 5
<![endif]-->


You can also use "lt", "gt", or "lte" to specify which browser, like this:



<!--[if gt IE 6]>
This would change settings if the browser was [I]GREATER THAN (gt) Internet Explorer 6<br />
<![endif]-->



"lte" would stand for "Less Than or Equal to"

[Medyman]

Is there a way to say for the left column:

{ minimum-height:600px; } ?


:rolleyes: How about using the min-height (http://www.w3schools.com/CSS/pr_dim_min-height.asp) CSS property?


#left-column {
min-height:600px;
float:left;
}

[kuau]

Brilliant! I didn't know that one existed. Thanks a million. Did the trick perfectly.

How about this one? I have a static page (unlike the one above) where the right column varies from week to week depepnding on what I put in it, but it is always longer than the left column. How in css do you say:

#leftcol { minimum-height:'the varying height of the right column' px; } ?

I have been manually changing the leftcol height each time. Thanks. :)

[Medyman]

How about this one? I have a static page (unlike the one above) where the right column varies from week to week depepnding on what I put in it, but it is always longer than the left column. How in css do you say:

#leftcol { minimum-height:'the varying height of the right column' px; } ?

I have been manually changing the leftcol height each time. Thanks. :)

That you can't do...directly.

This is what I do (http://www.visualbinary.net/files/tutorials/css-equal-height/). You can find more techniques if you Google "CSS equal height".

You could also use javascript to do it.

[kuau]

WOW! That is ingenious. So the border of the right col does not impact the left col at all? I'll definitely try this. Seems almost too good to be true. Thank you so much!!! e :)

[Medyman]

WOW! That is ingenious. So the border of the right col does not impact the left col at all? I'll definitely try this. Seems almost too good to be true. Thank you so much!!! e :)

Nope. The left column is floated over the border. So, as long as your right column will always be longer than the left, this will 100% work. The thing is you have to have that kind of guarantee. This technique won't work if your columns vary in relative height (i.e. sometimes the left one is longer).

Also, note that this limits the use of image backgrounds. If you're using an image-based background, I suggest using the faux columns (http://www.alistapart.com/articles/fauxcolumns/) technique. But, if you just want a solid color, or don't want a the image background to stretch the full length of the left column, this will work.

[kuau]

Actually your solution seems custom-made for this application. The left col never changes and has a sollid color. The right column has an image background and varies from week to week. Presumably, I make the left-border of the rightcol the color of the left column (?). I'm dying to try it but have to attend to another site at the moment.

Really appreciate your sharing your solutions and great links. Mahalo! e :)

[Medyman]

Presumably, I make the left-border of the rightcol the color of the left column (?)

Exactly.

[kuau]

Kewl!! Thanks :)