Align right increasing height of cell

  • Thread starter Thread starter tshad
  • Start date Start date
T

tshad

I have a cell with 2 items in it: a textbox and a link.

The link is actually a button (image), but for the example I am using a
link, which is doing the same thing.

Here is the stripped down version of my page that shows the problem:

***********************************************************************************
<html>
<head></head>
<body>
<table id="DataList1" cellspacing="0" cellpadding="0" border="1"
width="400" style="margin:0">
<tr>
<td align="Center">
<table id="DataList1__ctl12_newQuestionPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<input name="DataList1:_ctl12:newQuestion" type="text" size="20"
id="DataList1__ctl12_newQuestion" />
<div align="right">
<a id="DataList1__ctl12_btnAdd">test</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
*******************************************************************************************

If you take out the <div> tags, the word test will be directly after the
text box with the height of the cell the same as the text box. I wanted to
put the link all the way to the right without creating another cell and the
only way I could seem to sort of get it to work was the above way.

The problem is that the height of the cell doubles and the work "test" goes
all the way to the right, but down to the bottom of the cell (below the text
box).

Why is it doing this and how do I get it to directly to the right of the
textbox?

Thanks,

Tom.
 
Hi Tom,

Try the code below. I added another table inside of the cell giving you
trouble:

<html>
<head></head>
<body>
<table id="DataList1" cellspacing="0" cellpadding="0" border="1"
width="400" style="margin:0">
<tr>
<td align="Center">
<table id="DataList1__ctl12_newQuestionPanel" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td>
<input name="DataList1:_ctl12:newQuestion" type="text" size="20"
id="DataList1__ctl12_newQuestion" /></td>
<td align="right"><a id="DataList1__ctl12_btnAdd">test</a></td>
</tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Good luck! Ken.
 
that because a div by default is a block element (same as a table). that
means they implay a <br> before and after. you can change the style to
inline, but then you need to set a width. the best is to use a nested
table:

<table cellpading = 0 cellspacing=0 border=0 width=100%>
<td><input name="DataList1:_ctl12:newQuestion" type="text" size="20"
id="DataList1__ctl12_newQuestion" /></td>
<td align=right><a id="DataList1__ctl12_btnAdd">test</a></td>
</table>

-- bruce (sqlwork.com)

| I have a cell with 2 items in it: a textbox and a link.
|
| The link is actually a button (image), but for the example I am using a
| link, which is doing the same thing.
|
| Here is the stripped down version of my page that shows the problem:
|
|
****************************************************************************
*******
| <html>
| <head></head>
| <body>
| <table id="DataList1" cellspacing="0" cellpadding="0" border="1"
| width="400" style="margin:0">
| <tr>
| <td align="Center">
| <table id="DataList1__ctl12_newQuestionPanel" cellpadding="0"
| cellspacing="0" border="0" width="100%">
| <tr>
| <td>
| <input name="DataList1:_ctl12:newQuestion" type="text" size="20"
| id="DataList1__ctl12_newQuestion" />
| <div align="right">
| <a id="DataList1__ctl12_btnAdd">test</a>
| </div>
| </td>
| </tr>
| </table>
| </td>
| </tr>
| </table>
| </body>
| </html>
|
****************************************************************************
***************
|
| If you take out the <div> tags, the word test will be directly after the
| text box with the height of the cell the same as the text box. I wanted
to
| put the link all the way to the right without creating another cell and
the
| only way I could seem to sort of get it to work was the above way.
|
| The problem is that the height of the cell doubles and the work "test"
goes
| all the way to the right, but down to the bottom of the cell (below the
text
| box).
|
| Why is it doing this and how do I get it to directly to the right of the
| textbox?
|
| Thanks,
|
| Tom.
|
|
 
bruce barker said:
that because a div by default is a block element (same as a table). that
means they implay a <br> before and after. you can change the style to
inline, but then you need to set a width. the best is to use a nested
table:

<table cellpading = 0 cellspacing=0 border=0 width=100%>
<td><input name="DataList1:_ctl12:newQuestion" type="text"
size="20"
id="DataList1__ctl12_newQuestion" /></td>
<td align=right><a id="DataList1__ctl12_btnAdd">test</a></td>
</table>
Click to expand...

I was hoping to get away from using another table. I thought I would be
able to right justify the button/link. It does right justify, just adds the
<br> as you say. I tried to change the div to span and it would right
justify at all.

Adding the table maybe the only way to solve the problem.

Thanks,

Tom.
 
YOu can do this using CSS and floats. Additionally, you may be able to
do it using a span tag instead of a div tag, though not 100% certain.

James
 
James Thomas said:
YOu can do this using CSS and floats. Additionally, you may be able to
do it using a span tag instead of a div tag, though not 100% certain.
Click to expand...

I thought of that (span), also. It doesn't seem to work. Maybe it has to
do with the fact that it goes to another line and then right justifies it.

How would I change it with CSS (preferably inline)?

Thanks,

Tom.
 
Roughly:

CSS:
Left {
float: left;
width: 7em;
}

br {
clear: both;
}

<label class="left">Whatever
<TEXTBOX CONTROL HERE>
<br /> <-- Restores float so things align as they should -->

I'm just learning this myself but have used something similar to the
above to create tableless order entry forms.

James
 
Back
Top