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

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; }