By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,640 Members | 2,167 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,640 IT Pros & Developers. It's quick & easy.

floating problem

P: n/a
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.

Sep 28 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Els
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
Sep 28 '06 #2

P: n/a
On 2006-09-28, Veerle <ve*********@hotmail.comwrote:
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 <tdto be as small as
possible, so it just shrink-wraps the image?

In that case, just set the <tdwith 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.
Sep 28 '06 #3

P: n/a

Thanks Els and Ben, this indeed solves the problem.

Ben C schreef:
On 2006-09-28, Veerle <ve*********@hotmail.comwrote:
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 <tdto be as small as
possible, so it just shrink-wraps the image?

In that case, just set the <tdwith 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.
Sep 28 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.