Webmaster Forum / HTML, CSS, Scripts / CSS / September 2006

I have the following html:

<table cellpadding="0" cellspacing="0" width="850">
<tr>
   <td>
       <div id="messagebox">
           <div class="Dialog">
               <div class="DialogHeader">Fouten</div>
               <div class="DialogBody">
                   ...
               </div>
           </div>
       </div>
   </td>
   <td style="vertical-align: top; padding-top: 10px; text-align:
right">
       <input type="image" name="saveBtn" id="saveBtn"
src="images/nl-BE/b_Save.gif" style="border-width:0px;" />
   </td>
</tr>
</table>

If the content int he DialogBody is wide enough, this gives the
expected behaviour: the td with the save button takes up its minimal
width being the width of the image. The messagebox div takes the rest.
But if the content of DialogBody is empty, the table decides itself
what the widths of the colums are and then the width of the messagebox
is about 40% of the table width and the td with the button is the other
60%.

It is not possible to give the td with the button a static width,
because the button that is shown is determined by an asp.net page and
it can be a wide button or a small button.

I tried making two divs: one for the messagebox, one for the button
area, and set them both to float right, but then the messagebox div
always (with content or without content in the DialogBody) takes the
full 850px and the buttons move to under the messagebox.

What I want is the behaviour of the messagebox with lots of text in it
even when the content of DialogBody is empty and without giving the
button area a static width.