floating problem

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.

Veerle wrote:

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.

AFAIK TDs stretch when they need to contain stuff that is too wide for
the given width.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Richenel - Dance Around The World

On 2006-09-28, Veerle <veerleverbr (AT) hotmail (DOT) com> wrote:

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.

If I understand correctly, you want the second <td> to be as small as
possible, so it just shrink-wraps the image?

In that case, just set the <td> with the image in it to width: 1px. As
Els pointed out in another followup, <td>s never overflow, the table
will stretch to fit. But the UA will try to get as close to the 1px you
asked for as it can, without allowing the content to overflow. This
makes column 1 bigger and column 2 just big enough for the content.

Thanks Els and Ben, this indeed solves the problem.

Ben C schreef:

On 2006-09-28, Veerle <veerleverbr (AT) hotmail (DOT) com> wrote:
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.

If I understand correctly, you want the second <td> to be as small as
possible, so it just shrink-wraps the image?

In that case, just set the <td> with the image in it to width: 1px. As
Els pointed out in another followup, <td>s never overflow, the table
will stretch to fit. But the UA will try to get as close to the 1px you
asked for as it can, without allowing the content to overflow. This
makes column 1 bigger and column 2 just big enough for the content.