Search code examples
htmlcsscalc

CSS - Use calc() to keep widths of elements the same

Is something like this possible in CSS?

<table>
  <tr>
    <td id="elementOne">elementOne</td>
    <td id="elementtwo">elementtwo</td>
  </tr>
</table>

<div style="width: calc(document.getElementById(elementOne).width)"></div>

So that the div is always the same width as elementOne.

Is there such a feature in CSS, using calc() or some other means?

Solution

  • No, it's not possible with CSS.

    For that you will have to use JavaScript (document.getElementById(elementOne).offsetWidth or similar, depending on exactly what width you are looking for). Calc is used to do math, not execute scripts. There is no way of putting JS in a CSS statement, like you are trying to do.

    For more help on the JS bit, see How do I retrieve an HTML element's actual width and height?

    Edit: For some background on why this would be a bad idea to implement in CSS, se Value calculation for CSS (TL;DR: It has been tried. Things exploded)