Creating nice alignment

  • Thread starter Thread starter K Viltersten
  • Start date Start date
K

K Viltersten

I've got the code below and i wonder if there's a
smooth way to code the layout for the controls
and the text so that the left edges of the text boxes
are aligned horizontally.

Also, what if i change the size of the boxes (or
put in additional text behind them)? Is it still
possible to align them as i described?

<div>
Some text:<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox><br />
Some longer text:<asp:TextBox ID="TextBox2" runat="server">
</asp:TextBox>
</div>
 
I've got the code below and i wonder if there's a
smooth way to code the layout for the controls
and the text so that the left edges of the text boxes
are aligned horizontally.

Also, what if i change the size of the boxes (or
put in additional text behind them)? Is it still
possible to align them as i described?

<div>
Some text:<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox><br />
Some longer text:<asp:TextBox ID="TextBox2" runat="server">
</asp:TextBox>
</div>
Click to expand...

You may try following. Put each "line" within a <div> container.

<div>.... line 1 with text and control </div>
<div>.... line 2 with text and control </div>

then split each "column" by using another pair of <div>'s for text and
controls.

<div>...text </div><div>...control </div>

Add fixed width for the first "column" using width attribute, e.g.
width:200px

So, finally you would have something like this

<div>
<div style="float:left;width:200px">
Some text:
</div>
<div style="float:left;">
<input type="text">
</div>
<div style="clear:both">
<div>
</div>
<div style="float:left;width:200px">
Some longer text:
</div>
<div style="float:left">
<input type="text">

</div>
</div>

Hope this helps
 
You may try following. Put each "line" within
a <div> container.
<div>.... line 1 with text and control </div>
<div>.... line 2 with text and control </div>
then split each "column" by using another pair
of <div>'s for text and controls.
<div>...text </div><div>...control </div>
Add fixed width for the first "column" using
width attribute, e.g. width:200px
So, finally you would have something like this
<div>
<div style="float:left;width:200px">
Some text:
</div>
<div style="float:left;">
<input type="text">
</div>
<div style="clear:both">
<div>
</div>
<div style="float:left;width:200px">
Some longer text:
</div>
<div style="float:left">
<input type="text">
</div>
</div>
Hope this helps
Click to expand...

It does. Thanks a lot. However, i have one more
question. You used "clear:both". I believe it's for
cleaning up the float edge. However, being a
smart-ass, i skipped that. The layout looks still the
same. Why should i use that? I guess there's a very
good reason and don't want to learn it the hard way.
 
... You used "clear:both"...
...i skipped that. The layout looks still the same.
Click to expand...

Perhaps i should add that i only used "float:left"
on the leftmost, inner <div>-element, not the
second one. Is that good coding or would you
recommend not to go that way?
 
Perhaps i should add that i only used "float:left"
on the leftmost, inner <div>-element, not the
second one. Is that good coding or would you
recommend not to go that way?
Click to expand...

Regarding "clear:both". It depends on layout. I added a text below the
floated element and it was remained at the right side, so I used clear
property to break the "line" down.

Regarding "float:left". Yes it can work too. I just wanted to show how
different styles could change the layout. I would recommend to test it
with different size of a window and in other browsers like Firefox to
see if all goes right.
 
... You used "clear:both"...
Regarding "clear:both". It depends on layout. I added a text below the
floated element and it was remained at the right side, so I used clear
property to break the "line" down.

Regarding "float:left". Yes it can work too. I just wanted to show how
different styles could change the layout. I would recommend to test it
with different size of a window and in other browsers like Firefox to
see if all goes right.
Click to expand...

Thanks a lot. Also, i noticed that when i now tried to
put margins on the text box, the space gets rather big
(about 70px), even though the specified style states
1px. Any comments on that?
 
Thanks a lot. Also, i noticed that when i now tried to
put margins on the text box, the space gets rather big
(about 70px), even though the specified style states
1px. Any comments on that?
Click to expand...

A space of the border?

Did you try to make something like this?

<input type="text" style="border: 1px #cccccc solid;">
 
Back
Top