SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by highway57 View Post
    Is there any way to mix units in a CSS rule, such as { height: 240px + 7.2em } ?
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    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.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, all useful comments - many thanks. I'll think again. :-(


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •