Question

Let’s say I have a style sheet

dt{
width=15%;
}
dt x{
  background-color:red;
  ????
}

And some html…

<dt>abc
  <x> xyz </x>
</dt>

What if anything can put in place of the ???? to cause the box being defined by ‘dt x’ to be the remainder of dt?

The idea being that there should be a box 15% wide with text “abc” on the left with NO background color and the remainder of the 15% filled with red background.

Answer 1

float:right;

That would give you (basicly) what you want.

IMO you would want to give a fixed width to the ABC and contain it in a div or something maybe.

dt x1 {
    width:25%;
}
dt x2 {
     width:75%;
}

<x1>abc</x1><x2></x2>

maybe.. you might have to state they’re inline but I think that’s default

edit:

As with your comment:

dt {
   background-color: black;
}
dt x {
   background-color: blue;
}

<dt>
<x>abc</x>
</dt>

edit2:

as with your 2nd comment:

dt x1 {
    width:25%;
}
dt x2 {
     width:75%;
     background-color: pink;
}

<x1>abc</x1><x2></x2>