tags:

views:

114

answers:

3

I have this code

<html>
 <head>
  <style type="text/css">
   .frame                  {width: 50em; border: 1px solid black}
   .frame  label           {width: 20em; display: block; text-align:right; border: 1px solid green} 
   .frame label span       {width: 20em; display: block; font-size: .5em; border: 1px solid red; text-align: right}
  </style>
 </head>
 <body>
  <div class="frame">
   <label>
    Label
    <span>
     Span
    </span>
   </label>
  </div>
 </body>

The red "Span" is set to 20em. But it should be as large as the green "Label". I want to keep the font-size small in the red part though. Unfortunately even if the font-size is half as large, I can't use 40em to get the same size. Any idea howto solve that problem?

+2  A: 

px is not an option as I do want to keep the design "scalable". I just found out, that it works with "width: 100%" for the span.

2ni
Yes, width: 100%; would set it to 100% of the containing element--which might be a better design for you.
Patrick Szalapski
you should put this in your question earlier. I thought that all you want is to solve that problem. (as stated in your question) :-s
andyk
+1  A: 

If you don’t declare a width for the SPAN element (or width:100%), its property display:block would already make sure that its width would be the full available width.

Gumbo
+1  A: 

Note that using em's is relative to the containing em size. When using px's or pt's your size is relative to screen resolution. Which is why you were getting a 20em's worth of width for the red span when inside of a 20em label.

null