Multiple elements with same width equal to widest element

Question

I have two elements (a button and an anchor tag) both with a dynamical text inside that grow to the length of their content.
I cannot know which one of them will be the longest at compile time, nor can I know what the maximum/minimum width will be.
The shorter one should always adapt to the longest one.

<span id="buttonsColumn">
 <button type="submit" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
  <span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
 </button>                    
 <a class="linkButton" href="something">
  <span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
 </a>
</span>

The wrapping span can be changed to anything desired.
Any ideas?

Answer 1

As I see it, you could do it two ways:

1. Figure out the length on the ASP side and set a variable with the length of the larger, then use that in a size property on each.
2. Write a javascript function to figure out which of the two is larger and set the length of both to that.

Answer 2

You could try something like this:

#buttonsColumn {
    display: block;
    float: left;
    background-color: #F88;
}
#buttonsColumn button,
#buttonsColumn a {
    display: block;
}
#buttonsColumn button {
    width: 100%;
    background-color: #8F8;
}
#buttonsColumn a {
    width: 100%;
    background-color: #88F;
}

Answer 3

Might I suggest you give up and use tables?

They are still part of the specification after all, and what you're doing could be construed as tabular data. All you'd need to add would be a style="width:50%" to each table data tag and a style="width:100%" tag to the button.

<table>
<tr>
    <td style="width:50%">
    <button type="submit" style="width:100%" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
     <span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
    </button>
    </td>
    <td style="width:50%">
    <a class="linkButton" href="something">
     <span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
    </a>
    </td>
</tr>
</table>

You can probably get rid of those spans within the button and anchor tags, they don't seem to serve a purpose unless your CSS is doing something with the span children of the container.

Answer 4

Hmmm. IE's proprietary expression will get you out of this for IE, but I can't think of a way to do this without JS for other browsers. Experimenting now...