Any way to mix units?

Is there any way to mix units in a CSS rule, such as { height: 240px + 7.2em } ?

Or failing that, how can one find out (php? JavaScript?) how many pixels 1 em is equal to on a user’s system?

Not afaik, but I’m not a css expert. Perhaps if you explain what you are trying to achieve and why you need to mix units someone might offer an alternative solution.

I have an image that’s 240px high and below it some text that’s 7.2em high, but I need to give a height to the enclosing div. I can’t do it in px because I’ve no way of knowing how many pixels 7.2em is on any user’s system, and I can’t do it in em - well, for the same reason, so I can’t allocate a set number of em to the image.

Uhm, if the image is that tall, and the text is that tall, why do you need to declare the height?!? Let the height of the image and the height of the text add up letting flow do it’s job!

As a rule of thumb, declaring heights on containers is a miserable /FAIL/ at web design in all but the rarest of cases, particularly anything that might be multiple lines of text.

I have an image that’s 240px high and below it some text that’s 7.2em high, but I need to give a height to the enclosing div.

This makes me assume you have floats or something, otherwise, as Crusty said, a box will always be tall enough.

You have several options, if floats are involved:

  • you can set a min-height. This lets the box grow if for example I am looking at the page with my slightly larger default fonts.
  • you can enclose your floats, using any of the more common enclosement methods: setting overflow to anything other than visible + haslayout trigger for IE6, clearfix + haslayout trigger for IE6 and 7, display: table, float left/right, and I’m prolly forgetting one.

If you don’t have floats involved, it might be time for you to post some code and state what effect you’re going for.

Is there any way to mix units in a CSS rule, such as { height: 240px + 7.2em } ?

If you use something like LESS or SASS, yes.

As Jason said above I can’t see a reason that you need to specify a height as the parent will enclose the content anyway (assuming no floats are involved).

You could account for a pixel size image by adding 240px padding top to the parent and then drag the image into the padding and thus the height of the parent can be defined in ems and still account for the pixel height image.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
p { margin:0 0 1em }
.wrap {
	padding-top:240px;
	height:7.2em;
	font-size:100%;
	border:5px solid red;
	width:400px;
	background:#fcf;
}
.image {
	margin:-240px auto 0;
	width:240px;
	height:240px;
	display:block;
	position:relative;
	background:#000;
	color:#fff;
	text-align:center;
	line-height:240px;/* not required*/
}
.txtbox {
	height:7.2em;
	background:yellow;
}
</style>
</head>

<body>
<div class="wrap">
		<p class="image">Image here</p>
		<div class="txtbox">
				<p>lorem ipsum</p>
				<p>lorem ipsum</p>
				<p>lorem ipsum</p>
		</div>
</div>
</body>
</html>


However, I can’t envisage a scenario where you would need to do that :slight_smile:

OK, all useful comments - many thanks. I’ll think again. :frowning: